How to change row color according to level of data?

2 Answers 529 Views
TreeList
Enes
Top achievements
Rank 1
Iron
Enes asked on 08 Dec 2022, 08:04 AM

Hi,

I am trying to use Kendo React TreeList with multiple level of data. I want to have different row background color for each level.
Is there a way to achieve this?

Any help would be highly appreciated.

2 Answers, 1 is accepted

Sort by
1
Konstantin Dikov
Telerik team
answered on 08 Dec 2022, 09:49 AM

Hello Enes,

For achieving the desired result you can use the "rowRender" of the TreeList and use "props.level" to retrieve the level of the current item and based on that level, you can then set custom background color to the TR element. 

For your convenience, following is a simple example demonstrating such implementation:

Hope this helps.

 

Regards,
Konstantin Dikov
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
mert
Top achievements
Rank 1
Iron
answered on 09 Dec 2022, 10:26 AM

Hi, 

I was looking for something like this too. But can we get an image like the ss I sent with this method? I want to create a tonal difference between the lines.

Any help would be highly appreciated.

 

Konstantin Dikov
Telerik team
commented on 13 Dec 2022, 07:02 AM

Hi Hert,

For adding difference between the lines you can use the "props.ariaRowIndex" value, which will give you the row index within the entire TreeList. You can add additional logic for adding some differences in the colors from the previous example if the row is even/odd:

Having the level and the row index should allow you to customize the rows as per your exact requirement.

Hope this helps.

Tags
TreeList
Asked by
Enes
Top achievements
Rank 1
Iron
Answers by
Konstantin Dikov
Telerik team
mert
Top achievements
Rank 1
Iron
Share this question
or