Grid "dirty" flag not updating

Question

I am having trouble manually setting/removing the "dirty flag" indicator on the Kendo grid control.

I have extended the tutorial to preserve dirty indicators to include additional validation on the value field during the dataSource.change event:

1. A previously saved value (which contains an id) which has been modified to be 0 - this is a valid "dirty flag" (e.items[0].id > 0 && e.items[0].value === 0)
2. A value has been entered with a value greater than 0 - this is a valid "dirty flag" (e.items[0].value > 0)
3. Any other instance of value is not a valid "dirty flag" and therefore should be removed
4. If the user has left the value field "blank" i.e. "null", modify the value to 0 (if (!e.items[0].value) {e.items[0].value = 0;})

With these changes applied, the change event now looks like:

change: function (e) {
    if (e.action == "itemchange") {                
        if ((e.items[0].id > 0 && e.items[0].value === 0) || e.items[0].value > 0) {
            e.items[0].dirtyFields = e.items[0].dirtyFields || {};
            e.items[0].dirtyFields[e.field] = true;
            _dirty = true;
        }
        else {
            if (!e.items[0].value) {
                e.items[0].value = 0;
            }
            e.items[0].dirty = false;
            e.items[0].dirtyFields = e.items[0].dirtyFields || {};
            e.items[0].dirtyFields[e.field] = false;
        }
        $("#grid").data("kendoGrid").refresh();
    }
}

Upon making these changes, I can see the dirtyField function (which is the template of the value column) being triggered, and can also see the appropriate true/false values being supplied and the appropriate return taking place (which, I thought, should set/remove the "dirty flag" from the appropriate cells):

function dirtyField(data, fieldName){
    if(data.dirty && data.dirtyFields[fieldName]){
        return "<span class='k-dirty'></span>"
    }
    else{
        return "";
    }
}

However, the "dirty flag" is not being removed until another cell within the grid is modified.

Here is a Dojo example to demonstrate the issue. In order to replicate:

• Enter a value greater than 0 into the second row value cell (sets "dirty flag")
• Delete the value from the second row value cell ("dirty flag" remains -> should now be gone based on change event logic)
• Enter a value greater than 0 into the third row value cell (sets "dirty flag" on current cell, removes "dirty flag" from second row value cell)

Answer 1

Your DataSource.change event is called before the grid cell is closed. So you refresh grid and cell changes are not properly reflected in the UI.

You should move grid refresh to grid cellClose event. Then grid refresh will be called after the cell is closed and everything works correctly.

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    pageable: true,
    navigatable: true,
    height: 400,            
    columns: [
        { field: "value", title: "Value", editor: decimal_NumberEditor, format: '{0:n2}', attributes: { class: "editable-cell" }, template: "#=dirtyField(data,'value')# #:value#" }],
    editable: true,
    cellClose: function(e) {
        $("#grid").data("kendoGrid").refresh();
    }
});

Here is working example with events logging for better understangind of what's going on. See JS console:

http://dojo.telerik.com/ICIxUX/7