row custom background color disappears on expand/collapse of treelist

[Labhesh]

Hi, 

I am  using the following method to modify row background colors. 

Basically I want all parents to have one color while their children to have another color.

 

Here's what I am doing:

However, on expanding the treelist, it goes back to the original color (i.e. alternating white and greys)..What do I need to fix (or some other way) to accomplish what I am trying? 

 

function onDataBound(e){
    console.log("data bound event called");
    var rows = e.sender.tbody.children();
    for (var j=0; j<rows.length;j++){
        var row = $(rows[j]);
        var dataItem = e.sender.dataItem(row);
        var stratName = dataItem.get("strategyName");
        if (stratName.indexOf("parent") != -1 ) {
            row.css({"background-color": "#fda"});
        }
        else{
            row.css({"background-color": "#ced"});
        }

    }

}// end of onDataBound

 

Thanks a lot, 

Labhesh

[Labhesh]

So this does it for me in css:

 

.k-treelist .k-alt{
    background-color:white;
}
.k-treelist{
    background-color:white;
}
.k-treelist-group.ng-scope {
    background-color: #cccccc;
}

[Ravi Kumar]

Hi,
I am using Kendu TrreList with 4 level data. Now i want to have different row background color for each level.
e.g., If expand parent row then all the child rows background color should be different. And further any child has its own children & expansion of it, all the sub-child rows should be in different color.

[Konstantin Dikov]

Hello Ravi,

You could handle the "dataBound", "expand" and "collapse" events of the TreeList and add custom class names to the TR elements, based on the number of elements in the first cell (which could be used to indicate the level):

• https://dojo.telerik.com/idasOYoh/2

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Enes]

Hi,

Is there a way to apply similar solution to kendo react? I couldn't find a way to customize row colors according to level.

Any help will be greatly appreciated.

[Konstantin Dikov]

Hi Enes,

I am just going to post the example that I have shared in the support ticket that you have opened if someone else comes to this post for the KendoReact TreeList:

• https://stackblitz.com/edit/react-3vvrkx?file=app%2Fmain.jsx