Grid "dirty" flag not updating

Viewed 4606

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)
1 Answers
Related