0

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

Nixoderm
  • 355
  • 4
  • 23
  • Possible duplicated or similar issue https://stackoverflow.com/questions/14509590/selecting-an-element-that-has-a-specific-child – CMartins Sep 27 '19 at 07:33

1 Answers1

0

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 }
GaloisGirl
  • 1,476
  • 1
  • 8
  • 14
  • Is there a way to make selected margin same as all? means if I select sub-child padding or margin line same as parents – Nixoderm Sep 30 '19 at 08:11