Kendo UI Grid可编辑手册dataItem.set（）慢/延迟
我有一个可编辑的Kendo Grid，可能有一个带有复选框的列来更改布尔值。 我使用了OnaBai提出的这个解决方案 ，它完美运行！
唯一的问题是复选框值更改太慢。 当用户点击它时，需要大约1秒才能更改。 我意识到dataItem.set()方法由此延迟负责。
我的网格有相当数量的数据。 大约30-40列和300多行。 它的定义如下：
$("#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. */} });
另一个细节是，当调用dataItem.set()时，它调用dataBound()事件，但这不会导致延迟。 在此过程中未调用Grid的edit()方法。 我不知道是否值得发布dataSource代码。
在使用复选框时，我建议使用此代码库文章中的方法。 它不使用模型的set方法，仍然以相同的方式工作。 即使在单页上有2000条记录，CheckAll也能完美运行。
我找到了另一种方法来做OnaBai提出的并且它的工作更好。
// 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"); }
应该尝试这样的事情：
我将使用“编辑”按钮设置列，如下所示：
columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);
点击第一列（我有一个带超链接的图像）使用onclickfunction以编程方式单击“编辑”按钮，单击复选框，然后单击“更新”按钮。 可能更“旧学校”，但我喜欢知道它是按照我要做的顺序，如果我更新它，我自己。
我传入了对象（“this”），所以当出现时我可以得到行和复选框，新状态为0或1（我有一些代码使用它，但这个演示并不是真的必需，所以我为了简单起见，我将该部分从我的function中删除了），以及该项目的ID：
columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# 
#} else {# 
#}#"); 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(); }
当然，上面的代码假定复选框位于第一列。 否则，将该chkbox setAttribute行上的第一个childNodes[0]调整为它所在的列，减去一，因为它从零开始计数。
我做了一个很像@DontVoteMeDown的解决方案。 但我有一个嵌套网格（主/细节）所以我从事件参数中获取父网格。 此外，我只是在复选框上触发点击事件。
$("#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"); });