Kendo Grid: Removing dirty cell indicators

3
votes

I have been looking at a way to save off my client side edited grid data automatically when the user changes to another row (just like in access, sql management studio etc). It really seems to be a bit of a challenge to do.

One scheme was to use the data source sync, but this ha the problem of loosing our cell position (it always jumped to cell 0, 0).

I have been shown some clever work arounds (go back to the cell after the case, which by the way is hugely appreciated thanks), but it after some lengthy testing (by myself and others) seemed to be a little "glitchy" (perhaps I just need to work on this more)

At any rate, I wanted to explore perhaps not using this datasource sync and perhaps just do the server side calls "manually" (which is a bit is a pity, but if that's what we need to do, so be it). If I do this, I would want to reset the cell little red cell "dirty" indicators.

I thought I could use something similar to this scheme (except rather than resetting the flag, I want to unset).

So, as in the above link, I have the following..

 var pendingChanges = [];

 function gridEdit(e) {
   var cellHeader = $("#gridID").find("th[data-field='" + e.field + "']");
   if (cellHeader[0] != undefined) {
      var pendingChange = new Object();         
     pendingChange.PropertyName = e.field;        
     pendingChange.ColumnIndex = cellHeader[0].cellIndex;        
     pendingChange.uid = e.items[0].uid;
     pendingChanges.push(pendingChange);
    }
   }

where we call gridEdit from the datasource change..

var dataSrc = new kendo.data.DataSource({
change: function (e) {
  gridEdit(e);
},

Now assuming we have a callback that detects the row change, I thought I could do the following...

// clear cell property (red indicator)
for (var i = 0; i < pendingChanges.length; i++) {
  var row = grid.tbody.find("tr[data-uid='" + pendingChanges[i].uid + "']");
  var cell = row.find("td:eq(" + pendingChanges[i].ColumnIndex + ")");

  if (cell.hasClass("k-dirty-cell")) {
    cell.removeClass("k-dirty-cell");

    console.log("removed dirty class");
  }
}

pendingChanges.length = 0;

// No good, we loose current cell again! (sigh..)
//grid.refresh();

When this didn't work, I also tried resetting the data source dirty flag..

// clear dirty flag from the database
var dirtyRows = $.grep(vm.gridData.view(),
  function (item) {
    return item.dirty == true;
  })

if (dirtyRows && dirtyRows.length > 0) {
  dirtyRows[0].dirty = false;
}

demo here

After none of the above worked, I tried the grid.refresh(), but this has the same problem as the datasource sync (we loose our current cell)

Would anyone have any idea how I can clear this cell indicator, without refreshing the whole grid that seems to totally loose our editing context?

Thanks in advance for any help!

3
kendo-uikendo-grid

3 Answers

5
votes

Css : 

.k-dirty-clear {
  border-width:0;
}

Grid edit event :

  edit: function(e) {
    $("#grid .k-dirty").addClass("k-dirty-clear"); //Clear indicators
    $("#grid .k-dirty").removeClass("k-dirty-clear"); //Show indicators
  }

http://jsbin.com/celajewuwe/2/edit

1
votes

Simple solution for resolve that problem is to override the color of the "flag" to transparent. just override the ".k-dirty" class (border-color) just adding the above lines to your css

CSS: 

//k-dirty is the class that kendo grid use for mark edited cells that not saved yet. 
//we override that class cause we do not want the red flag
.k-dirty {
    border-color:transparent transparent transparent transparent;
}
1
votes

This can also be done by applying the below style,

<style>
  .k-dirty{
    display: none;      
  }
</style>