Adding Dirty Flag when Edit Grid Cells

Updated on Aug 14, 2026

Environment

Product

Progress® Kendo UI for Angular Grid

Description

How can I add a dirty flag when cell value is changed in Kendo Grid?

Solution

1. Change the default styles of the TD elements and create custom CSS class for the dirty flag:

css

.k-grid .k-grid-content td {
    position: relative;
}

.dirty:before {
    content: "\\e003";
    font-family: WebComponentsIcons;
    font-size: 24px;
    position: absolute;
    top: -12px;
    left: -8px;
    color: red;
}

2. Use the CellTemplateDirective to apply the created dirty class conditionally for each column:

html

<ng-template kendoGridCellTemplate let-dataItem let-column="column">
    <div [class.dirty]="isEdited(dataItem, column)">
        {{ dataItem[column.field] }}
    </div>
</ng-template>

ts

    public isEdited(dataItem, column): boolean {
        if (this.editedItems[dataItem.ProductID]?.length && this.editedItems[dataItem.ProductID]?.indexOf(column.field) > -1) {
            return true;
        } else {
            return false;
        }
    }

The editedItems is a custom object that stores the edited cells per row. The key represents the edited row, while the value is a custom collection which stores the edited column fields:

json

{"1":["ProductName","UnitPrice"]}

In cellClose event handler, you can check the value of the FormGroup dirty property. Based on the status, create new key-value pair or update the corresponding row collection:

ts

public cellCloseHandler(args: any) {
  const { formGroup, dataItem } = args;
  ...
  if (formGroup.dirty) {
    if (!this.editedItems[formGroup.value.ProductID]) {
      this.editedItems[formGroup.value.ProductID] = [];
    }
    for (let key in formGroup.controls) {
      if (formGroup.get(key).dirty) {
        if (this.editedItems[formGroup.value.ProductID].indexOf(key) === -1) {
          this.editedItems[formGroup.value.ProductID].push(key);
        }
      }
    }
    ...
  }
}

The logic used to determine the dirty flag visibility could vary depending on the specific project requirements.

The following example shows the full implementation of the demonstrated approach.

Loading ...