Highlight edited cell

[alexis]

I have a grid with editing in the cell. I need to put the yellow color in each cell after this cell is edited. Can you help me please? Which is the better way in this case?In this moment I have for example : 

<kendo-grid-column [style]="isEdited ? {'background-color': '#666','color': '#fff'} : {}" field="customerDateWanted" [width]="150" editor="date" title="Cust Date"

        [format]="'{0:yyyy-MM-dd}'">

        <ng-template KendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">

            <kendo-datepicker [formControl]="formGroup.controls.customerDateWanted" [format]="'dd/MM/yyyy'">

            </kendo-datepicker>

        </ng-template>

    </kendo-grid-column>

 

isEdited is a boolean that I am testing. I think that I need to put a value depending of this cell was edited or not but I don't know how.

 

Thanks!!

[Martin Bechev]

Hi Alexis,

Thank you for the provided code snippet.

I am afraid that the Kendo UI for Angular Grid does not provide a built-in mechanism for indicating the edited cells (such as Batch Editing in Kendo for jQuery). The implementation of such functionality currently is left in the hands of the developer as it would require custom logic for applying the background color dynamically in the desired place.

However, the most straightforward approach to achieve the desired behavior is to customize the Grid cells, using kendoGridCellTemplate:

https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-styling-cells-on-the-fly

What can be done is to keep the edited items and fields in a local collection, and provide a custom logic that will bind a CSS class to the edited cells dynamically, for example:

https://stackblitz.com/edit/angular-ns4aty-5r8nut

I want to mention that the purpose of the demo is to show a possible way of achieving the requirement, and any further modifications and adjustments are considered developer effort.

I hope this sheds some light on this case.

Regards,
Martin
Progress Telerik