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屋！