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

change the icon of the collapse/Expand RadGantt

3 Answers 94 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
bassam
Top achievements
Rank 1
Veteran
bassam asked on 17 May 2020, 11:41 PM
How to change the icon of the collapse/Expand in the radGantt?

3 Answers, 1 is accepted

Sort by
0
bassam
Top achievements
Rank 1
Veteran
answered on 17 May 2020, 11:45 PM
How to change the icon of the collapse/Expand in the radGantt?[/quote]
0
Peter Milchev
Telerik team
answered on 20 May 2020, 10:23 AM

Hello Bassam,

The expand/collapse icons are rendered with the following HTML and have these styles:

<span class="radIcon radIconExpand">
    :before
</span>

<span class="radIcon radIconCollapse">
    :before
</span>
.RadGantt .rgtTreelist .rgtTreelistContent .radIcon {
    vertical-align: text-top;
}

.RadGantt .rgtTreelist .radIconExpand, 
.RadGantt .rgtTreelist .radIconCollapse {
    cursor: default;
}

.k-icon, .radIcon {
    width: 1em;
    height: 1em;
    background-image: none;
    font: 16px/1 "WebComponentsIcons";
    display: inline-block;
}
.radIconExpand:before {
    content: "\e005";
}
.radIconCollapse:before {
    content: "\e006";
}
.k-icon:before, .radIcon:before {
    width: 1em;
    height: 1em;
    display: inline-block;
}

With that said, you can use custom styles to change the font-family of these icons and change the content of their :before pseudo elements.

For such customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
bassam
Top achievements
Rank 1
Veteran
answered on 21 May 2020, 07:14 PM
 Hello  Peter Milchev
Thanks a lot for the quick answers
I could not add this code to ASB.net
Please kindly provide us with an example as possible
Sorry for the inconvenience
Tags
Gantt
Asked by
bassam
Top achievements
Rank 1
Veteran
Answers by
bassam
Top achievements
Rank 1
Veteran
Peter Milchev
Telerik team
Share this question
or