Add dirty indicator in Grid cells with in-cell editing

Environment

Description

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

Solution

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: