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 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. "

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

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.