Kendo UI Grid可編輯手冊dataItem.set（）慢/延遲

我有一個可編輯的Kendo網格，可能有一個帶有複選框的列來更改布爾值。我已使用this solution建議OnaBai這是完美的工作！Kendo UI Grid可編輯手冊dataItem.set（）慢/延遲

唯一的問題是複選框值更改太慢。用戶點擊它時，大約需要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()事件，但未造成了延誤。網格的edit()方法未在此過程中調用。我不知道是否值得發帖dataSource的代碼。

來源

2013-10-29 DontVoteMeDown

我發現了一種替代方式來做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"); 
}

來源

2013-11-05 11:28:13 DontVoteMeDown

沒有爲我工作。我收到一個'模板'爲空或不是對象的錯誤。爲什麼如果你不使用它的任何東西的uid？此外，道具是特定於jQuery的後續版本和早期的IE版本不支持它，而「attr」是通用的。但是$（e.target）只有在像這樣的動作函數中才有效，而不是IE（http://www.javascripter.net/faq/eventtargetsrcelement.htm）。使用'$ {Id}'傳入的'.setAttribute（'id'，id）''等屬性可以用來通過jQuery獲取對象，並且是通用的。 – vapcguy

另外，在我的回答中，當我嘗試將'.trigger（「change」）'與'.blur（）'混合使用時，它並不喜歡它。我不得不把它們放在不同的路線上。 – vapcguy

@vapcguy但是我沒有在這裏問.NET的任何問題。我甚至不使用它，只有JavaScript。所以你在** my **案中的回答沒有幫助。 – DontVoteMeDown

我建議使用this代碼庫文章談談使用複選框的方法。它不使用模型的設置方法，仍然以同樣的方式工作。即使在單個頁面上有2000條記錄，CheckAll也能完美地工作。

來源

2013-10-29 16:46:33

對不起，但它似乎是我使用的相同方法。查看文件Index.cshtml第30行。與我引用的答案中使用的片段相同。 – DontVoteMeDown

是的我引用了CheckAll函數中使用的方法，您可以看到IsAdmin屬性直接分配（不使用set方法），之後手動刷新表格。 –

我明白了 - 我想。在我的情況下，賦值不是由'set（）'，該值由dataSource解析。這很好。我僅在'click'事件上調用的代碼中使用'set（）'方法。 – DontVoteMeDown

應該嘗試這樣的事：

我將設置與編輯按鈕列看起來像這樣：

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

而且有它在那裏點擊進入第一列（我有超鏈接的圖像）使用onclick函數以編程方式單擊編輯按鈕，單擊複選框，然後單擊更新按鈕。也許更「老派」，但我喜歡知道它是按照我將要做的順序，如果我正在更新它，我自己。我傳入對象（「this」），所以當它出現時，我可以獲得行和複選框，新狀態爲0或1（我有一些代碼使用它，對於這個演示沒有必要，雖然如此，我要離開的那部分我爲了簡單的功能），以及該項目的ID：上述

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(); 

}

代碼假設，當然，該複選框中的第一列。否則，將該chkbox setAttribute行上的第一個childNodes[0]調整爲它所在的列，減去一，因爲它從零開始計數。

來源

2014-10-22 05:11:15 vapcguy

我做了很像@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"); 
});

來源

2016-01-29 13:50:38

Kendo UI Grid可編輯手冊dataItem.set（）慢/延遲

回答

相關問題