How to change expand/collapse icons nowadays

[Tayger]

Hello

I've got a treeview on a dark barkground. That way I can't see the expand/close arrow on each node tough its still there. So I wondered how I can change their colors. They are probably icons so changing color by CSS is not possible.I've found some examples many years ago that don't seem to work anymore. I've tried to affect the expand/collapse area in any way, but no changes will show up:

.k-icon .k-i-collapse .k-i-expand {
    background-color: #8ea03a !important;
    background: url("../image/arrowclose.svg") center center;
}

.k-treeview .k-plus {
    background-color:yellow !important;;
    color:yellow !important;;
}

 

So I wonder how can I change the color and/or expand/collapse icons of a treeview?

Regards

 

 

[Tayger]

I forgot to mention the same problem on drag behaviour in treeview. I can't see the placeholder on dark background. In other situation I can use/configure a kendoSortable as I did in the past but since the treeview Widget has its own drop/drag behaviour it is probably not possible/makes no sense to bind a kendoSortable to a treeview(?)

So the followup question is: Is there a way to change/configure the placeholder in the treeview Widget? Just changing the color would already be great. 

[Dimitar]

Hello Farai,

On the following Dojo example you will find a simple implementation of the Kendo UI TreeView, where I have used CSS to change the expand and collapse icons and also change their color. 

Basically, to achieve this, I have used the following custom styles:

k-treeview .k-icon.k-i-collapse {
  color: red;
}

               
.k-treeview .k-icon.k-i-expand {
  color: blue;
}

               
.k-treeview .k-i-collapse:before {
  content: "\e128";
}

               
.k-treeview .k-i-expand:before {
  content: "\e127";
}

This can also be used for the dragging icons, for example to change the insert-middle icon you can target the following selector:

.k-i-insert-middle:before { content: "\..." }

In addition to the above, you can use the following article for reference to the Kendo UI icons.

Regards,
Dimitar
Progress Telerik

[Tayger]

Hello Dimitar

Excellent and very informative answer, again, thank you! I was not aware of the icons inside the KendoUI, will consider to use them in future! Even though it's good to know they exist you probably misinterpreted one of my question. I'm fine with the popping up icons (insert-up/middle/down/add) while dragging a Treeview item. Now I know how to replace them if necessary but I was asking about the placeholder INSIDE the Treeview. There is always a little dot (probably 1 pixel size) that appears on dragging to a position where you could drop the Treeview item. You also can see that dot between the items in your demo while dragging an item: Drag demo Treeview

I was wondering if I could replace that dot by a better visible horizontal line. Something similar like the placeholder option of Kendo UI Sortable. There is no placeholder option for draggable items in Treeview and it also makes probably no sense to add a Sortable Widget to a Treeview Widget. :o)

So the question is: Is there a way to replace that placeholder dot by f.e. by a horizontal line in Kendo UI Treeview?

Regards

 

[Dimitar]

Hello Farai,

There is actually a Kendo UI icon which indicates where the node will be dropped, but there is an existing issue with it in the current version. You can start tracking the progress we make on it from this GitHub item. 

As a workaround, you can use CSS to modify the position of the icon and you can also change it (as shown in my previous reply). You can check this Dojo example, where the described behavior is demonstrated. 

Regards,
Dimitar
Progress Telerik

[Tayger]

Thanks again for the excellent answer! The described bug is exactly what I run into. I hope it will be corrected in one of the next releases even though its open since February. Would use your workaround if not fixed till I have to move to Production.

Regards