how to clear the little red flag in the corner of the kendo grid cell

2
votes

I am allowing users to edit some cells of the grid. For example, when they enter a date cell, a datepicker pops out and they select a date. This action of changing the cell contents fires the grid's save event and it causes a little red flag to appear in the corner of the cell.

I've tried setting the dirty property to false:

   save: function (e) {
        // here, save the row to the database for "real-time" saves after every change
        // no need to hit a Save button
        // <snip>
        e.model.dirty = false;  // does not remove the red flag
    }

but that does not clear the red flag. What is the proper way to clear it?

3
kendo-grid

3 Answers

3
votes

Contrary to it's name, the kendo grid's "save" event does not commit the modified data to the server. It merely means that the data entered in the UI widget has been "saved" to the bound data. It will still display the dirty flag because it is still volatile data which has not yet been committed to the server.

To actually commit the data you need to call the grid's saveChanges method. This method merely calls the grid's dataSource's sync method which you could do alternatively. Either way, once you do this and the post completes successfully, the red flags will disappear.

One last thing, if you set the grid's dataSource's autoSync property to true, the dataSource will perform a sync whenever any changes occur. That is, each grid "save" event will actually mean that the data was committed to the server.

2
votes

I used this command to clear the flags.

$('#Grid').data('kendoGrid').refresh();
2
votes

According to Telerik Support they recommend you do it using CSS.

.k-grid .k-dirty {
  display: none;
}