Kendo TreeView selected CSS inside div

0
votes

I had this kendo treeview. When select a node or sub's-node I want the orange color at full line and same with others (refer to image below).

I to use script below, but when it come to sub's-group the align is not same. Appreciate your help.

.k-treeview span.k-in {
  margin-left: -10%;
  padding-left: 10%;
  padding-right: 60%;  
}

DEMO IN DOJO

enter image description here

1
csskendo-uikendo-treeview
Possible duplicated or similar issue stackoverflow.com/questions/14509590/… – CMartins

1 Answers

0
votes

The way the tree currently works is that the li.k-item have a left padding of 16px, so for the second level it's 32px and so on.

What you need to do is put the indenting mechanism somewhere else. Your li.k-item must have no left padding, but a div inside must. Depending on your item template, it will be something like:

.k-treeview li > div { padding-left: 16px }
.k-treeview li li > div { padding-left: 32px }
.k-treeview li li li > div { padding-left: 48px }

You can generate a dozen levels with less or sass.

When you have this, you can style the selected row:

li[aria-selected="true"] { border: 2px solid orange }