New to Kendo UI for Angular? Start a free 30-day trial
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
- Change the default styles of the TD elements and create custom CSS class for the dirty flag:
.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;
}- Use the
CellTemplateDirectiveto apply the createddirtyclass conditionally for each column:
<ng-template kendoGridCellTemplate let-dataItem let-column="column">
<div [class.dirty]="isEdited(dataItem, column)">
{{ dataItem[column.field] }}
</div>
</ng-template> 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:
{"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:
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.
Example
View Source
Change Theme:
