Row highlight in grid

[Jaspreet]

Hi,

We have a requirement to highlight the row and cell based on some conditions in the grid. For KendoGridColumn, we have added the hightlight based on condition using template but for row as we don't have rowTemplate provided by kendo. Is there any way that kendo provide/recommends  to hightlight the row conditionaly.  We have found this old arcticle -> https://www.telerik.com/forums/kendo-ui-style-grid-rows, but it is looping over the grid data, in our case we have huge amount of data so looping would be performance problem. Kindly suggest if there is efficient way. 

 

Regards,

Jaspreet

[Martin]

Hello Jaspreet,

Please check the following article where it is explained in detail how the Grid rows can be styled conditionally based on the dataItem value or some other custom logic:

https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-rows

I hope this helps.

Regards,
Martin
Progress Telerik

[Jaspreet]

hi Martin,

We need to apply style dynamically based on the color selection in palette. The approach mentioned in the link we need to have class in the CSS and that can be used in grid rows. 

 

 

[Martin]

Hello Jaspreet,

There is a style option similar to ngStyle, applicable to Grid column components only:

https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-customizing-column-styles

The only available option for styling specific rows with dynamic styles, without using the rowClass callback, is to utilize the Cell templates, and provide the styling for desired cells, e.g.:

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

The approach can be extended to styling whole rows too, e.g.:

https://stackblitz.com/edit/angular-lh8g5o

Regards,

Martin
Progress Telerik