Values in grid using in-cell editing with client template aren't actually updating until after onChange when tabbing out of cell

[Steven]

Package version: 2020.1.406

We have a grid taking advantage of a client template and the onChange event to automatically save changes.

Everything works correctly if the user presses "Enter" or clicks out of the cell.

If the user uses the "Tab" key to navigate to the next cell, the onChange event fires before the value actually updates in the input.

In the onChange event, if it fires after using the tab key the value is the previous value, but hen using "enter" or clicking out of cell the values are the correct updated value.

 

Here is the code.

 

@(Html.Kendo().Grid<StubAmountsViewModel>
            ()
            .Name("stubAmountsGrid")
            .Columns(columns =>
            {
            //columns.Bound(c => c.AccrualHeaderId).Visible(false);
            columns.Bound(c => c.CustomerNumber);
            columns.Bound(c => c.BusinessUnit).Visible(false);
            //columns.Bound(c => c.CustomerDescription);
            columns.Bound(c => c.DataDate).Format("{0:MMM-yyyy}");
            columns.Bound(c => c.JobDescription);
            columns.Bound(c => c.StubAccrualValue).HtmlAttributes(new {onChange = "stubAccrualValueChange(this)"})
            .ClientTemplate("<input type='text' class='numeric k-textbox k-grid-StubAccrualValue stubAccrualValueInput' min='0' step='0.01' value='#=StubAccrualValue#' style='width: 100% !important;'  />");
            })
            .DataSource(source => source
            .Ajax()
            .PageSize(20)
            .Model(m => m.Id(r => r.AccrualHeaderId))
            .Read(read => read.Action("ReadStubAmounts", "Admin").Data("getClosedMonthData")))
            .Groupable()
            .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .Sortable()
            .Events(events => events.DataBound("stubAmountsDataBound"))
            )

 

function stubAccrualValueChange(e) {
        const accrual = $("#stubAmountsGrid").data("kendoGrid").dataItem($(e).closest('tr'));
        const newValue = $(e).find("input.stubAccrualValueInput").first()[0].ariaValueNow;

        $.ajax({
            url: '@Url.Action("UpdateStubAccrualValue", "Admin")',
            type: 'POST',
            data: { accrualHeaderId: accrual.AccrualHeaderId, stubAccrualValue: newValue },
            cache: false,
            success: function() {
                //$("#stubAmountsGrid").data("kendoGrid").dataSource.read();
            }
        });
    }

[Mihaela]

Hi Steven,

You could handle the "keydown" event of the Grid table and prevent the default action of the "Tab" key:

<script>
    $(document).ready(function () {
        var grid = $("#stubAmountsGrid").data("kendoGrid"); //get an instance of the Grid

        grid.table.on("keydown", function (e) { //handle the "keydown" event
            if (e.keyCode == 9) { //check if "Tab" is pressed
                e.preventDefault(); //prevent the default action of the "Tab" key

                var curentCell = $(e.target).closest("td"); //get the current table cell/table data
                var nextCell = $(curentCell).next(); //find the next editable cell

                var colDataIndex = grid.cellIndex($(e.target).closest('td'));
                var dataItem = grid.dataItem($(e.target).closest('tr')); //get the current data item
                var field = grid.columns[colDataIndex].field; //get the name of the Model field
                var value = $(e.target).val(); //get the value of the current editable table cell

                 //update the data 

                setTimeout(function () {
                    grid.editCell(nextCell[0]); //switch the table cell on the next editable cell
                });
            }
        });
    });
</script>

I hope that helps.

 

Regards, Mihaela Progress Telerik