how to change insert/update/delete icons to use bootstrap glyphicons on my RadTreeList

[ck]

using telerik v.2014.3.1024.45 with ASP.NET 4.5
How can i use the boostrap glyphicons for my edit / insert / delete buttons?
so far i have used this

                    <telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="ImageButton" ShowAddButton="true" ShowEditButton="true" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center">

but i cannot find a simple way to change the icons.

let me know please
thanks

[Venelin]

Hello ck,

Since you are using the latest version of the controls, then you can set the render mode of RadTreeList to lightweight: RenderMode="Lightweight". After doing so the rendering will change in order to support glyph icons. One more change that you need is, instead of using EditCommandColumn, use this:

ASPX:

<telerik:TreeListButtonColumn CommandName="Delete" ButtonType="LinkButton" ButtonCssClass="CustomeDeleteButton rtlIcon" ></telerik:TreeListButtonColumn>

The reason for this change is that the EditCommandColumn still renders an <input> element, which can't have a font-icon. We will improve this, but you should be perfectly ok with the another approach. rtlIcon is predefined class, don't change its name, the another one can have another name, this one is just an example.

CSS:

@font-face {
    /*see bootstrap documentation*/
}
.RadTreeList .rtlIcon {
    /*the bootstrap font, see bootstrap documentation*/
}
.CustomeDeleteButton {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 1px solid red;
}
/*For DELETE*/
.RadTreeList .rtlIcon.CustomeDeleteButton:before {
    content: '\E035'; /*example value*/
}
/*for INSERT/ADD*/
div.RadTreeList .rtlAddIcon:before {
    content: '\E035'; /*example value*/
}

/*for EDIT*/
div.RadTreeList .rtlEditIcon:before {
    content: '\E035'; /*example value*/
}

After properly including the bootstrap font in your project, then you simply need to overwrite the example values above with the ones that correspond on the proper Bootstrap icons you would like to use.

Regards,
Venelin
Telerik

 

 

[ck]

yeah thanks. it sounds a bit over complicated. I ended up extracting the bootstrap glyphicons into pngs and using them in image buttons.