在Kendo网格中的分页上手动维护脏单元标记 [英] manually maintain dirty cell marker on paging in Kendo grid
问题描述
我有一个可编辑的Kendo网格，可以在其中编辑单元格，该网格将红色标记添加到该单元格的左上角.
I have an editable Kendo grid where I can edit a cell and the grid adds the red mark to the upper left hand corner of the cell.
我转到另一页，然后返回到进行编辑的页面，红色标记消失了，但是单元格中新添加的值仍然保留.我在Kendo网站上看到了对此的回应，有人建议:为了在网格每次反弹时显示脏标志"，它必须遍历所有模型，检查所有字段是否已更改并在其中可见.网格单元."
I go to another page and then come back to the page where the edit took place and the red mark is gone but the newly added value in the cell remains. I saw a response to this on the Kendo site where it was advised that: "In order to show the "dirty flag" every time the grid is rebound it will have to iterate through all the model, check all fields if changed and visible in the grid cells. "
我假设这需要在网格的DataBound()事件上完成(切换页面时似乎会触发)，在该事件中我将k-dirty-cell类手动应用于单元格，但我无法确定了解如何在代码中完成这项工作.任何想法都将不胜感激.
I'm assuming this will need to be done on the DataBound() event of the grid (seems to fire when I switch pages) where I will manually apply the k-dirty-cell class to the cell but I can't figure out how to make this work in code. Any thoughts are greatly appreciated.
$(function () {
$("#grid").kendoGrid({
height: 550,
scrollable: true,
sortable: true,
filterable: true,
resizable: true,
reorderable: true,
groupable: false,
editable: true, // enable editing
columns: [
//REMOVED TO SHORTEN EXAMPLE
],
toolbar: [{name: "save", text: "Save All Records"}, "cancel"],
dataSource: {
schema: {
data: "d",
total: function(data) {
return data.d.length;
},
model: {
//REMOVED TO SHORTEN EXAMPLE
}
}
},
batch: true,
pageSize: 10,
transport: {
read: {
},
parameterMap: function (data, operation) {
if (operation == "read") {
//WEB SERVICE CALLS REMOVED... YOU GET THE POINT
}
else if(operation == "update") {
//WEB SERVICE CALLS REMOVED... YOU GET THE POINT
}
}
},
},
selectable: true,
pageable: true,
dataBound: function ()
{
//THIS IS FIRED WHEN I CHANGE PAGEs BUT
//NOT SURE WHAT CODE GOES HERE TO
//REAPPLY DIRTY CELL MARKER
};
推荐答案
数据绑定事件是重新应用此事件的好地方，但是我要记住，在遍历网格的dataItems时，每个对象都有一个脏标志行，但不是每个字段.
The databound event is a good place to re-apply this, but I keep in mind that when looping through the grid's dataItems, there is a dirty flag for each row, but NOT each field.
很可能我不知道仅引用网格中未决更改的方法，但是我写了一个小型系统，可以追溯到更细粒度的级别.
It's highly possible I'm not aware of a way to reference just the pending changes in a grid, but I wrote a small system a ways back to track such changes at a more granular level.
在我的系统中，我将网格的未决更改存储在一个名为PendingChanges的全局变量中.
In my system, I store the grid's pending changes in an global variable called PendingChanges.
然后我指定两个事件.第一个是网格数据源中的更改事件.这段代码存储了刚刚发生的更改所需的信息:
I then specify two events. The first is the change event in the grid's dataSource. This code stores the information you need from the change that just occurred:
var PendingChanges = [];
function GridEdit(e) {
var cellHeader = $("#grid").find("th[data-title='" + e.field + "']");
if (cellHeader[0] != undefined) {
var pendingChange = new Object();
//Holds field name
pendingChange.PropertyName = e.field;
//Keeps track of which td element to select when re-adding the red triangle
pendingChange.ColumnIndex = cellHeader[0].cellIndex;
//used to pull row. Better than the row's id because you could have
//multiple rows that have been inserted but not saved (ie. all have
//ID set to 0
pendingChange.uid = e.items[0].uid;
//Remember to clear this out after you save
PendingChanges.push(pendingChange);
}
}
然后，我使用 dataBound事件来检查即将发生的更改并设置相关单元格以显示红色三角形:
Then, I use the dataBound event to check what pending changes are around and set the relevant cells to display the red triangle:
function GridDataBound(e) {
for (var i = 0; i < PendingChanges.length; i++) {
var row = this.tbody.find("tr[data-uid='" + PendingChanges[i].uid + "']");
var cell = row.find("td:eq(" + PendingChanges[i].ColumnIndex + ")");
if (!cell.hasClass("k-dirty-cell")) {
cell.addClass("k-dirty-cell");
cell.prepend("<span class='k-dirty'></span>");
}
}
}
在上面的代码中，this指的是The widget instance which fired the event..这直接来自Kendo UI文档.
In the above code this is referring to The widget instance which fired the event.. That is straight from the Kendo UI Docs.
希望这至少可以为您指明正确的方向.如果要保存网格，则成功保存后，请不要忘记清除PendingChanges数组.我建议为此使用RequestEnd事件.
Hopefully this at least points you in the right direction. If you are saving the grid, don't forget to clear out the PendingChanges array once you get a successful save. I suggest using the RequestEnd event for that.
这篇关于在Kendo网格中的分页上手动维护脏单元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
