How to compare and display kendo dirty flag upon editing only if the old value and new value are different before saving the grid

Question

In a kendo grid, in grid cell when I change a value kendo's dirty flag is displayed. But then when I click back to the same grid cell and change it to the previous value (already existing value) the dirty flag still appears.

How can I check whether the value is similar to the previous value and not display the dirty flag before saving.

Below is my code for kendo editable dropdown.

function editCategoryDropDown(container, options) {
    var catObject = JSON.parse(ticketProjectCategoryObject.value);
    $('<div  id="categoryDDTreeView" class="dropDownTreeViewStyle"/>').appendTo(container);
    var catDropDownTreeView = $("#categoryDDTreeView").kendoExtDropDownTreeView({
        treeview: {
            dataSource: new kendo.data.HierarchicalDataSource({
                data: catObject
            }),
            //expended: true,
            loadOnDemand: false,
            change: function (e) {
                {
                    var dropDownTreeViewObj = $('#categoryDDTreeView').find('.k-input');
                    var nodeTitle = dropDownTreeViewObj.attr("title");
                    if (nodeTitle != null) {
                        options.model.Category = nodeTitle;
                        options.model.CategoryId = dropDownTreeViewObj.attr("nodevalue")
                        options.model.dirty = true;
                        container.addClass("k-dirty-cell");
                    }
                };
            }
        },
    }).data("kendoExtDropDownTreeView");
    var dropDownBox = catDropDownTreeView.dropDownList();
    dropDownBox.text(options.model.Category)
    var treeView = catDropDownTreeView.treeview();
    var node = treeView.findByText(options.model.Category.split("|").pop().trim());
    treeView.select(node);

}

Answer 1

This is an interesting task, so I invested some time in experimenting. Consider the following approach:

• in the edit event of the Grid, save the original state of the data item (e.model.toJSON()) in some variable. toJSON is needed to strip the Kendo-specific fields and methods, convert the data item to a plain JavaScript object and break the automatic value updates that will otherwise occur, as the data item is passed by reference.

  edit: function(e) {
      var model = e.model;
      if (!originalDataItems[model.id]) {
          originalDataItems[model.id] = model.toJSON();
      }
  }
  

• in the save event of the Grid, compare the new dirty values with the original data item values. If they are the same, apply a custom CSS class to the table cell. You will need to wrap the code in the save handler in setTimeout, because this event is fired before the edited cell has been closed and switched back to non-edit mode.

  save: function(e) {
    setTimeout(function() {
      e.sender.tbody.find(".k-dirty-cell").each(function() {
        var cell = $(this);
        var field = e.sender.columns[cell.index()].field;
        var dataItem = e.sender.dataItem(cell.closest("tr"));
  
        cell.toggleClass("no-dirty",
            originalDataItems[dataItem.id][field] == dataItem[field]);
      });
    });
  }
  

• The custom CSS class can be used to hide the dirty mark like this:

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

• Finally, remove all items from the originalDataItems collection when all pending changes are saved, i.e. in the saveChanges event.

  saveChanges: function() {
      originalDataItems = {};
  }
  

Here is a complete example:

http://dojo.telerik.com/ivOBU

One thing to point out is that even though the dirty marks will be hidden, the respective data item will still be dirty and subject to syncing with the remote data service. This is a minor issue when batch editing is used (as in your case), but if you want to prevent unnecessary data transfer, enhance the save handler and reset the unmodified data items' dirty field to false.