• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Add dirty indicator in Grid cells with in-cell editing


Product Version5.12.0
ProductProgress® KendoReact


I want to show dirty indicator for edited cells in Grid with enabled in-cell editing.


This can be achieved by tracking the changes and compare them with the original data. With the stored information about the modified cell values we then can add a class name within the cellRender event of the Grid that we can use for displaying a dirty indicator.

The changes are tracked within the onItemChange event. The dirty collection is cleared after saving or canceling the changes (within saveChanges and cancelChanges).

The custom style for the dirty cells is within the "styles.css" file targeting the TD elements with class "dirty".

This is an example showcasing this approach:

View Source
Change Theme:

In this article

Not finding the help you need?