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

3 posts, 0 answers
  1. ck
    ck avatar
    28 posts
    Member since:
    Mar 2013

    Posted 12 Jan 2015 Link to this post

    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

  2. Venelin
    Venelin avatar
    352 posts

    Posted 15 Jan 2015 Link to this post

    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:


    <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.


    @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.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. ck
    ck avatar
    28 posts
    Member since:
    Mar 2013

    Posted 15 Jan 2015 in reply to Venelin Link to this post

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