row custom background color disappears on expand/collapse of treelist

4 posts, 0 answers
  1. Labhesh
    Labhesh avatar
    26 posts
    Member since:
    Sep 2015

    Posted 16 Sep 2015 Link to this post


    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"});
                row.css({"background-color": "#ced"});
    }// end of onDataBound


    Thanks a lot, 


  2. Labhesh
    Labhesh avatar
    26 posts
    Member since:
    Sep 2015

    Posted 17 Sep 2015 in reply to Labhesh Link to this post

    So this does it for me in css:


    .k-treelist .k-alt{
    } {
        background-color: #cccccc;

  3. Ravi Kumar
    Ravi Kumar avatar
    2 posts
    Member since:
    Jan 2019

    Posted 04 Feb 2019 in reply to Labhesh Link to this post

    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.
  4. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 06 Feb 2019 Link to this post

    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.

    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.
Back to Top