Kendo UI Grid可编辑手册dataItem.set（）慢/延迟 [英] Kendo UI Grid editable manual dataItem.set() slow/delay

问题描述

我有一个可编辑的Kendo Grid，它可能有一个带有复选框的列来更改布尔值。我使用了 OnaBai 提出的此解决方案，该方案运行正常！

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!

唯一的问题是复选框值更改太慢。当用户点击它时，需要大约1秒才能更改。我意识到 dataItem.set（）方法是由此延迟造成的。

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.

我的网格数量相当可观数据的。大约30-40列和300多行。它的定义如下：

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. */}
});

另一个细节是，当 dataItem.set（）被调用，它调用 dataBound（）事件，但这不会导致延迟。未在此进程上调用Grid的 edit（）方法。我不知道是否值得发布 dataSource 代码。

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.

推荐答案

我找到了另一种方法来做OnaBai提出的并且它的效果更好。

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");
}

这篇关于Kendo UI Grid可编辑手册dataItem.set（）慢/延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！