manually maintain dirty cell marker on paging in Kendo grid

Question

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.

I go to another page and then come b

Answer 1

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.

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

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>");
        }
    }
}

In the above code this is referring to The widget instance which fired the event.. That is straight from the Kendo UI Docs.

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.