Batch Editing - Using Tab Key

2 posts, 0 answers
  1. Developer
    Developer avatar
    50 posts
    Member since:
    Apr 2014

    Posted 05 Nov 2018 Link to this post

    Hello,

    I have a RadGrid with batch editing enabled.  The columns are a mixture of GridDataboundColumn and GridTemplateColumn

    At the moment its configured that edit changes are saved whenever the cell being edited looses focus.

    I would like to get to the point where I can have a user make an edit, then once they’ve hit the tab key it saves the cell and then moves focus to the next editable cell in the row.

    I’ve enabled KeyboardNavigation but each time the grid saves its looses its place so that tab does not work.

    Is this possible – Can you provide an example please?
     


  2.
  3. Tsvetomir
    Admin
    Tsvetomir avatar
    150 posts

    Posted 07 Nov 2018 Link to this post

    Hello,

    The purpose of the Batch editing is to allow multi-line editing and perform multiple changes before the user decides to save the data. Its intention is to gather all the changes and send a request to the server only once, containing all the relevant data. 

    Implementing a functionality to send the edited data the moment a cell loses focus serves the exact opposite purpose of Batch editing. Creating the logic for such behavior would be burdensome work. 

    If having such behavior is a must-have, then you might opt for using a RadSpreadsheet or to make use of TemplateColumns and send the data to the server on the blur event of the controls inside the template.

    If wish to open the next cell for editing when a key is pressed, (e.g., using Tab), you can try attaching the KeyDown event to the grid in the PageLoad() event handler:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadGrid1.Attributes.Add("onKeyDown", "onKeyDown(event)");
    }

    Then customize the following handler according to your needs. You can check out the Batch Editing Client-side API for more information on working with batch editing.

    function onKeyDown(e) {
        var grid = e.target.control;
          
        if (e.keyCode == 9 && !e.shiftKey || e.keyCode == 39) {
            // if either ArrowRight or TAB is pressed
            e.preventDefault();
            // Find the next cell and open it for editing
            }
        } else if (e.keyCode == 9 && e.shiftKey || e.keyCode == 37) {
            // if either ArrowLeft or SHIFT+TAB is pressed
      
             // Find the previous cell and open it for editing
     
        }
    }

    Attached, you can find a sample with the aforementioned approach implemented. 

    Also, attached you can find a project with saving changes without clicking the Save Button. Hence, the changes take place when the OnChange event is called. Note that this is a rather custom solution and Telerik does not bear responsibility for performance implications or any misbehavior that might occur. 

    With the help of Client-Side Programming and Batch Editing API you can customize the projects/approaches to meet your requirements.

    Let me know if you need further clarification.

    Kind regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top