This is a migrated thread and some comments may be shown as answers.

Row highlight in grid

3 Answers 19 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Jaspreet asked on 19 Jan 2021, 01:46 PM

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

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 20 Jan 2021, 09:50 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jaspreet
Top achievements
Rank 1
Iron
Veteran
answered on 20 Jan 2021, 11:44 AM

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. 

 

 

0
Martin
Telerik team
answered on 22 Jan 2021, 06:50 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Answers by
Martin
Telerik team
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Share this question
or