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

row custom background color disappears on expand/collapse of treelist

3 Answers 224 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Labhesh
Top achievements
Rank 1
Labhesh asked on 16 Sep 2015, 04:36 PM

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

3 Answers, 1 is accepted

Sort by
0
Labhesh
Top achievements
Rank 1
answered on 17 Sep 2015, 04:06 PM

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;
}

0
Ravi Kumar
Top achievements
Rank 1
answered on 04 Feb 2019, 06:03 PM
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.
0
Konstantin Dikov
Telerik team
answered on 06 Feb 2019, 12:05 PM
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):
Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
Labhesh
Top achievements
Rank 1
Answers by
Labhesh
Top achievements
Rank 1
Ravi Kumar
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or