Invoke rowCallback/rowClassFn of grid only during databound

[Rajesh]

Hi,

I am working on Kendo grid Angular where we have to set the background color of rows based on one of the column values (DateTime column)

Compare the difference between the current DateTime and the column DateTime. If the difference is less than 30 minutes then set the background color of row. Using the below example as reference.

https://stackblitz.com/edit/angular-yh8zyr?file=app/app.component.ts

This works fine when grid is loaded for the first time. But the rowCallback function is also invoked when we sort a column in the grid and when we click on any row in the grid and when page index changed etc. The rowCallback is also fired when any event of other controls are invoked (ex: checkbox checked changed event, button click event etc) and the time difference is re calculated and changes the rows background color.

But i want to invoke this rowCallback and update the background of the rows only when grid data is refreshed on demand(we have a button to refresh the results in the grid & we have a checkbox which will refresh the results in the grid for every one minute). How can we achieve this.

Is there any other event/method where we can set the style for the rows in the grid ?

Regards,

Rajesh

[Svet]

Hi Rajesh,

Indeed, the described behavior is expected as the rowCallback function will be execute for each row every time the Grid is re-rendered. The Grid is re-rendered every time Angular's change detection mechanism is triggered. Sorting, paging and other events trigger Angular's change detection as they modify the data, that needs to be rendered by the grid. For more details on Angular's change detection you may check some of the online available resources like the following:
https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

One way to achieve the desired custom functionality would be to use a flag and only when we refresh the data to switch the flag. Then we will implement the custom logic inside the rowCallback only if the flag is switched on. However, as changing the value of a component's property will trigger Angular's change detection we will need to switch the flag outside Angular's zone. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-yh8zyr-jkjv1q?file=app/app.component.ts

I hope this points you in the right direction of achieving the desired custom functionality.

Regards,
Svetlin
Progress Telerik