change the icon of the collapse/Expand RadGantt

[bassam]

How to change the icon of the collapse/Expand in the radGantt?

[bassam]

How to change the icon of the collapse/Expand in the radGantt?[/quote]

[Peter Milchev]

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. 

• Inspect the Generated HTML of a Control;
• See the Applied Styles;

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: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Peter Milchev
Progress Telerik

[bassam]

 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