在 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
};
推荐答案
databound event 是重新应用这个的好地方，但我记住当循环遍历网格的 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指的是触发事件的小部件实例..这是直接来自Kendo UI Docs.
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屋！
