Adding Dirty Flag when Edit Grid Cells

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.

Change Theme

Theme

Loading ...