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
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:
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/.
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: