TreeList: Alternate category background color

0 Answers 34 Views
TreeList
lucerias
Top achievements
Rank 1
lucerias asked on 19 Aug 2022, 04:05 PM

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
Telerik team
commented on 24 Aug 2022, 07:22 AM

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
Top achievements
Rank 1
commented on 24 Aug 2022, 07:50 AM | edited

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
Telerik team
commented on 29 Aug 2022, 08:06 AM

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

No answers yet. Maybe you can help?

Tags
TreeList
Asked by
lucerias
Top achievements
Rank 1
Share this question
or