我有一个可编辑的Kendo Grid,它可能有一个带有复选框的列来更改布尔值。我已经使用 OnaBai 提出的this solution完美运行了!
唯一的问题是复选框值更改太慢。当用户点击它时,需要大约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
代码。
答案 0 :(得分:1)
我建议在使用复选框时使用 this 代码库文章中的方法。它不使用模型的set方法,仍然以相同的方式工作。即使在单页上有2000条记录,CheckAll也能完美运行。
答案 1 :(得分:0)
我找到了另一种方法来做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");
}
答案 2 :(得分:0)
应该尝试这样的事情:
我将使用“编辑”按钮设置列,如下所示:
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]
调整为它所在的列,减一,因为它从零开始计数。
答案 3 :(得分: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");
});