BuyLog In
Ticket T539038
Visible to All Users

Assistance creating an efficient transaction entry screen in XAF web

created 8 years ago

Hi DX Team,

I am using the new Web UI and have been generally happy with how it works, however I'd like to make a "transaction entry" screen (to, for example, enter sales data). What I would like is a flow like this:

  1. Click "New" on the root list view to create a new transaction
  2. Tab through the fields until you reach the "New" button on the nested/aggregated "lines" list view
  3. Press "Enter" on the keyboard and have it create a new row in "in line" edit mode
  4. Immediately pop up a search for product entry where the user can type a code or scan a barcode then press "Enter" on their keyboard
  5. If there is only one search result, automatically select that result and accept the dialog
  6. Automatically shift focus into the editor in the next column of the inline edit
  7. Once the user has tabbed through and entered data into the final column, press "Enter" on the keyboard to save that line and automatically create a new one
  8. If the user doesn't want to enter any more rows, they can click "Escape" on the keyboard, and that inline edit row will be cancelled

I am currently struggling with steps 3, 5, 7 and 8. I've been able to partially implement some of the in the attached example project, but I'd appreciate any assistance.

Thanks,
Adam

Comments (1)
DevExpress Support Team 8 years ago

    Hello Adam.

    We need some additional time to research your project and the task. We will respond once we have any results. Thanks for your patience.

    Sign in to comment on this post

    Answers approved by DevExpress Support

    created 8 years ago

    Thank you for contacting us.
    You can process pressing the ESC key the same way you process pressing the Enter key. The only difference is that the OnKeyDown event should be attached to all editors in the grid.
    To automatically select the only available search results, you can use the following controller:

    C#
    using DevExpress.ExpressApp;  
using DevExpress.ExpressApp.Actions;  
using DevExpress.ExpressApp.SystemModule;  
using DevExpress.ExpressApp.Web;  
using DevExpress.ExpressApp.Web.Editors.ASPx;  
using System;  
    public class FindLookupController : ViewController<ListView> {  
        protected override void OnFrameAssigned() {  
            base.OnFrameAssigned();  
            Active["PopupWindow"] = Frame is PopupWindow;  
        }  
        protected override void OnActivated() {  
            base.OnActivated();  
            FilterController filterController = Frame.GetController<FilterController>();  
            if(filterController != null) {  
                filterController.FullTextFilterAction.ExecuteCompleted += SetFilterAction_ExecuteCompleted;  
            }  
        }  
        private void SetFilterAction_ExecuteCompleted(object sender, ActionBaseEventArgs e) {  
            if(View.CollectionSource.GetCount() == 1) {  
                ((ASPxGridListEditor)View.Editor).Grid.Selection.SelectRow(0);  
                Frame.GetController<DialogController>()?.AcceptAction.DoExecute();  
            }  
        }  
    }

    To start inline editing instead of opening a detail view, you can use the following controller:

    C#
    using DevExpress.ExpressApp;  
using DevExpress.ExpressApp.Actions;  
using DevExpress.ExpressApp.SystemModule;  
using DevExpress.ExpressApp.Web;  
using DevExpress.ExpressApp.Web.Editors.ASPx;  
using System;  
 public class StartInlineEditingController : ViewController<ListView> {  
        public StartInlineEditingController() {  
            TargetViewNesting = Nesting.Nested;  
        }  
        protected override void OnViewControlsCreated() {  
            base.OnViewControlsCreated();  
            if(View.Editor is ASPxGridListEditor gridListEditor) {  
                gridListEditor.Grid.Load += Grid_Load;  
            }  
        }  
        private void Grid_Load(object sender, EventArgs e) {  
            NewObjectViewController newObjectViewController = Frame.GetController<NewObjectViewController>();  
            newObjectViewController?.NewObjectAction?.SetClientScript($"{((DevExpress.Web.ASPxGridView)sender).ClientID}.AddNewRow(); ", false);  
        }  
    }

    Note that I have not tested these controllers in all possible scenarios, so it may require additional testing and modifications to meet your requirements.
    Let me know if you need further assistance.

      Show previous comments (3)
      DevExpress Support Team 8 years ago

        I have managed to replicate this behavior and found that it is caused by the fact that the grid.UpdateEdit() method initiates a callback and the grid.AddNewRow() method is called before the first callback is completed. To avoid this, call the AddNewRow method when the callback is completed as follows:

        JavaScript
         function AddNewRow(grid) {  
    grid.EndCallback.RemoveHandler(AddNewRow);  
    grid.AddNewRow();  
}  
....  
grid.UpdateEdit();  
grid.EndCallback.AddHandler(AddNewRow)  
ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);  
...

        In order to make the New action work as per your requirements, the following optimization should be disabled in addition to the StartInlineEditingController controller:

        C#
        DevExpress.ExpressApp.Web.WebApplication.OptimizationSettings.EnableMenuDelayedCreation = false;  
DevExpress.ExpressApp.Web.WebApplication.OptimizationSettings.AllowFastProcessObjectsCreationActions = false;

        This can be done in the Application_Start method in the XafWebSample.Web\Global.asax.cs file.
        Do not hesitate to contact us in case of further difficulties.

        AS AS
        Adam Stiskala 8 years ago

          Hi Konstantin,

          Thanks for all the assistance so far, I'm getting very close to the desired result.

          Your suggestions have fixed the issues I had, but I have a new problem and an improvement I'd like to make:

          1. I experience an error when trying to delete a row on an unsaved order. See the attached video.

          2. When a new row is added and the "Product" search shows up, I'd like the user to be able to hit "Esc" at this stage (or press the cancel button) and have the lookup dismissed and the empty row (with null product and zero quantity) automatically cancelled/removed.

          Thanks in advance,
          Adam

          DevExpress Support Team 8 years ago

            To process your inquiry more effectively, I've created separate tickets on your behalf : How to cancel grid editing immediately after selecting a record in a lookup editor is canceled,  Unable to edit a newly created object in a nested collection. They have been placed in our processing queue and will be answered shortly.

            Sign in to comment on this post

            Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

            Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.