How to add a group class to a kendo dropdown tree

[Lee]

I would like to add a group class to the kendo dropdown tree so that each level can have a different style applied to it. How can I achieve this? Here is a basic Dojo: 
https://dojo.telerik.com/nJvbmwHv

[Nikolay]

Hi Lee,

You can add group classes to your DropDownTree using a template with CSS classes:

template: function(dataItem) {
    const level = dataItem.item.hierarchyLevel;
    return `<span class="tree-level-${level}" data-treelevel="${level}">${dataItem.item.text}</span>`;
  }

Dojo demo: https://dojo.telerik.com/RUikVWqB

Please let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Lee]

Unfortunately that is much too far down the tree. I was looking for it to be at the group (ul) level. I ended up just nesting a bunch of css like this:

.k-dropdowntree-group {
  background-color: white;
}

.k-dropdowntree-group .k-dropdowntree-group {
  background-color: gray;
}

.k-dropdowntree-group .k-dropdowntree-group .k-dropdowntree-group {
  background-color: pink;
}
...