Kendo UI Grid editable manual dataItem.set() slow/delay

Question

I have an editable Kendo Grid that may have a column with a checkbox to change a boolean value. I have used this solution proposed by OnaBai that is working perfectly!

The only problem is that the checkbox value change is too slow. When user clicks it, it takes about 1 second to change. I realize that the dataItem.set() method is responsible by this delay.

My grid has a considerable amount of data. About 30-40 columns and 300+ lines. It is defined as follows:

$("#mainGrid").kendoGrid({
    dataSource: dataSource,

    pageable: false,
    sortable: true,

    scrollable: true,
    editable: true,
    autoBind: false,
    columnMenu: true, // Cria o menu de exibição de colunas
    height: getGridHeight(),

    toolbar: [/* hide for brevity */],
    columns: [/* hide for brevity */],
    dataBound: function() { /* hide for brevity. */},
    edit: function() { /* hide for brevity. */}
});

Another detail is that, when dataItem.set() is called, it calls dataBound() event but that is not causing the delay. Grid's edit() method is not being called on this process. I don't know if worths to post dataSource code.

Answer 1

I would suggest using the approach from this code library article when it comes to use checkboxes. It does not use the set methods of the model and still works the same way. Even with 2000 records on a single page CheckAll will work flawlessly.

Answer 2

I have found an alternative way for doing what OnaBai proposed and it's working better.

// This is the grid
var grid = $("#mainGrid").data("kendoGrid");

// .flag is a class that is used on the checkboxes
grid.tbody.on("change", ".flag", function (e) 
{
    // Get the record uid
    var uid = grid.dataItem($(e.target).closest("tr")).uid;

    // Find the current cell
    var td = $(e.target).parent().parent();

    // This opens the cell to edit(edit mode)
    grid.editCell(td);

    // This ones changes the value of the Kendo's checkbox, that is quickly shown, 
    // changed and then hidden again. This marks the cell as 'dirty' too.
    $(td.find("input")[0]).prop("checked", $(e.target).is(":checked") ? "checked" : null).trigger("change").trigger("blur");
}

Answer 3

Should try something like this:

I'll set the column with the Edit button to look like this:

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

And have it where clicking into the first column (I have an image with a hyperlink) uses an onclick function to programmatically click the Edit button, click the checkbox, then click the Update button. Probably more "old school", but I like knowing it is following the order I would be doing if I were updating it, myself.

I pass in the object ("this"), so I can get the row and checkbox when it appears, the new status as 0 or 1 (I have some code that uses it, not really necessary for this demo, though, so I'm leaving that part out of my function for simplicity), and the ID of that item:

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");

function changeCheckbox(obj, status, id) {
    var parentTr = obj.parentNode.parentNode;
    $('[id="btnEdit_' + id + '"]').click();

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
    $('[id=chkbox_' + id + ']').click().trigger("change");
    $('[id=chkbox_' + id + ']').blur();

    var btnUpdate = $('[id="btnUpdate_' + id + '"]');
    $('[id="btnUpdate_' + id + '"]').click();

}

Code above assumes, of course, the checkbox is in the first column. Otherwise, adjust the first childNodes[0] on that chkbox setAttribute line to the column it sits in, minus one because it starts counting from zero.

Answer 4

I did a solution much like @DontVoteMeDown. But I have a nested grid (master / detail) so I get the parent grid from the event parameter. Also I just trigger a click-event on the checkbox.

$("#grid .k-grid-content").on("change", "input.chkbx", function (e) {
    // Get the parent grid of the checkbox. This can either be the master grid or the detail grid.
    var parentGrid = $(e.target).closest('div[data-role="grid"]').data("kendoGrid");
    // Get the clicked cell.
    var td = $(e.target).closest("td");
    // Enter the cell's edit mode.
    parentGrid.editCell(td);
    // Find the checkbox in the cell (which now is in "edit-mode").
    var checkbox = td.children("input[type=checkbox]");
    // Trigger a click (which will toggle check/uncheck).
    checkbox.trigger("click");
});