This is a migrated thread and some comments may be shown as answers.

How to change expand/collapse icons nowadays

5 Answers 3751 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 05 Jul 2017, 09:04 PM

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

 

 

5 Answers, 1 is accepted

Sort by
0
Tayger
Top achievements
Rank 1
Iron
answered on 05 Jul 2017, 11:14 PM

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. 

0
Dimitar
Telerik team
answered on 07 Jul 2017, 02:01 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
Iron
answered on 10 Jul 2017, 02:58 PM

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

 

0
Dimitar
Telerik team
answered on 11 Jul 2017, 08:28 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
Iron
answered on 11 Jul 2017, 07:41 PM

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

Tags
TreeView
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Tayger
Top achievements
Rank 1
Iron
Dimitar
Telerik team
Share this question
or