TreeList: Alternate category background color

[lucerias]

Hi all,

How to apply Alternate category background color on TreeList, for example, column A is the category column, which has the parent and child data, how to apply grey color to only column A of the first category and apply orange to the next category? How to make it to be dynamic alternate styling?

Thank you.

[Nikolay]

Hi Hui Hong,

You can apply different background colors to the TreeList rows and alternate ones with the following CSS rule:

        .k-grid-content tr:not(k-alt) {
          background-color: grey;
        }
        .k-grid-content tr.k-alt {
          background-color: orange;
        }

Here is a Dojo demo demonstrating this: https://dojo.telerik.com/AjABebeL

Please let me know if this is what you are looking for.

Regard,

Nikolay

[lucerias]

Hi Niko,

It is very closed to what i am looking for.

Instead of alternating the color by data row, is it possible to alternate by group?

e.g.

Group 1 (Grey): Parent A -> Child A, Child B, Child C: Total 4 rows (including parent row) in grey

Group 1 (Orange): Parent B -> Child D, Child E: Total 3 rows (including parent row) in orange

 

Thanks in advanced.

 

[Nikolay]

Hi Lucerias,

If I understand correctly you need a parent and all its nodes to have one color and respectively another parent with all nodes another one. Please correct me if I am wrong.

This can be achieved with the following custom logic:

var color = "green";
      var rows = $("tbody tr")
      rows.each(function(i, el){
        if(i === 0) {
          $(el).addClass(color);
        }
        if(i > 0) {
          $(el).addClass(color);
          if($(el).hasClass("k-treelist-group")) {
            color = "yellow";
            $(el).addClass(color);
          }
        }

Dojo: https://dojo.telerik.com/UroVIwAS

Please note the above might need adjusting depending on the requirement.

Let me know if you have any questions.

Regards,

Nikolay