Automatically adding new row on tab loses last value

4 posts, 0 answers
  1. Jon
    Jon avatar
    27 posts
    Member since:
    Dec 2012

    Posted 28 Jun 2017 Link to this post

    I used the solution (slightly modified for my use case) referenced in the docs to add a new row when tabbing out of the last editable column in the last row. However, when the new row is added, the changes made to that last editable cell are lost. How do I prevent that from happening?

    Here's my code. The "return false;" was necessary to prevent the focus going to the second column of the new row. The undesired behavior is occurring whether or not I include it.

    $(document).ready(function () {
        var grid = $("#ReceivingReportGrid").data("kendoGrid");
     
        grid.tbody.on("keydown", function (e) {
            if (e.keyCode == 9) {
                if ($(e.target).closest('td').is(':nth-last-child(2)') && $(e.target).closest('tr').is(':last-child')) {
                    grid.addRow();
                    return false;
                }
            }
        });
    });
  2. Georgi
    Admin
    Georgi avatar
    687 posts

    Posted 30 Jun 2017 Link to this post

    Hi Jon,

    The behavior you are observing is caused because the item is saved when blur event is fired but the keydown event is fired before that. So if you wrap the add new row logic inside a setTimeout callback function, the demo behaves as expected. I have assembled a small dojo which illustrates the aforementioned approach:

     

    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Ankush
    Ankush avatar
    3 posts
    Member since:
    Mar 2018

    Posted 21 Aug 2019 in reply to Georgi Link to this post

    Yes, but again. After tabbing out last cell, we don't get focus on first item of newly added row. 
  4. Georgi
    Admin
    Georgi avatar
    687 posts

    Posted 23 Aug 2019 Link to this post

    Hi Ankush,

    By default the browser sets the focus on the next focusable element when tab is pressed. As the new row is not yet within the dom when the tab is pressed, an element outside the grid is focused. You could avoid this by preventing the default behavior of the key down event.

    e.g.

    grid.tbody.on('keydown',function(e){
      if (e.keyCode == 9) {
     
        if($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')){
          e.preventDefault()
          $(e.target).blur();
              
         grid.addRow();
     
          
     
     
        }
      }
    })

    Below you will find a small sample which demonstrates the above approach:




    Regards,
    Georgi
    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