Automatically adding new row on tab loses last value

2 posts, 0 answers
  1. Jon
    Jon avatar
    25 posts
    Member since:
    Dec 2012

    Posted 28 Jun 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
    122 posts

    Posted 30 Jun 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.
Back to Top