Radgrid delete icon in silk skin

5 posts, 0 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 02 Apr 2014 Link to this post


    I've noticed you changed all the icons in the RadButton, in a SP (Q3 13 SP2). Strange.

    I also noticed, for a while now (Q2 13?), that the RadGrid delete icon is a red cross, while in the TreeList is is adjusted to the skin (glowing gray) The edit icon is the same as the TreeList.

    1. Why is the delete icon not like it is in TreeList?

    2. How can I do this? (Including the mouseover effect!)


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Apr 2014 in reply to Erik Link to this post

    Hi Erik,

    This is the expected behavior of the icons in RadButton. As a suggestion you can upgrade the telerik version to get the older icon style. Please have a look into this forum thread which discuss about the icon style issue of RadButton.

  3. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 04 Apr 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Yes, I'm aware of this post. I'm also reading that I'm not the only one who was annoyed. 

    My users worked with the color icons for years, and suddenly get mono icons, because you decided to change them. I do not understand why. I spend days trying to get it all back to normal with css and old icon sets from prev versions. Also I had to add css hacks because radbutton and other controls have problems in AjaxPanels and templates. 

    So, I spend over a week, to get your new version running. I would not call this backwards-compatible. And as a conclusion: This is NOT the expected behaviour ! 

    FYI: I seriously considering to end my subscription. If you make new versions that cost me weeks to implement, I better use the old version and cancel my subscription. That will save me time, and money. 

    Do you understand Shinu?

    But my question is simpler: The delete button of RadGrid is a red cross, that of the RadTreeList is a gray-glow cross. This is
    inconsequent, and I want them to look the same.

  4. Galin
    Galin avatar
    526 posts

    Posted 07 Apr 2014 Link to this post

    Hello Erik,

    Thank you for the feedback.

    I will forward this requirement to our developers so they improve the consequentiality between the RadControls. In the meantime I suggest you to use the following approach
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html>
    <head id="Head1" runat="server">
        <style type="text/css">
            div.RadGrid_Silk .rgDel,
            div.RadTreeList_Silk .rtlDel,
            div.RadTreeList_Silk .rtlDel:hover,
            div.RadTreeList_Silk .rtlDel:active {
                background-position: -67px -3367px;
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
        <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
                <telerik:RadTreeList ID="rdlMenu" runat="server" Skin="Silk"
                    DataKeyNames="Id" ParentDataKeyNames="ParentId"
                    AutoGenerateColumns="false" OnNeedDataSource="RadTreeList1_NeedDataSource">
                        <telerik:TreeListBoundColumn DataField="ParentId" UniqueName="ParentId" HeaderText="ParentId" Display="false">
                        <telerik:TreeListBoundColumn DataField="Position" UniqueName="Position" HeaderText="Position">
                        <telerik:TreeListButtonColumn CommandName="Edit" HeaderText="Edit" UniqueName="EditCommandColumn" ButtonType="ImageButton" ></telerik:TreeListButtonColumn>
                        <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" HeaderText="Delete" CommandName="Delete" ButtonType="ImageButton"></telerik:TreeListButtonColumn>
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid_NeedDataSource" Height="300px"
                AllowSorting="True" PageSize="20" AllowPaging="True">
                <MasterTableView AllowFilteringByColumn="True" TableLayout="Fixed">
                        <telerik:GridBoundColumn DataField="Custom1" HeaderText="Column 1"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Custom2" HeaderText="Column 2"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Custom3" HeaderText="Column 3"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Custom4" HeaderText="Column 4"></telerik:GridBoundColumn>
                        <telerik:GridButtonColumn CommandName="Delete" ButtonType="LinkButton" ButtonCssClass="rgDel"></telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Edit" ButtonType="LinkButton" ButtonCssClass="rgEdit"></telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton"></telerik:GridButtonColumn>
                        <telerik:GridButtonColumn CommandName="Edit" ButtonType="ImageButton"></telerik:GridButtonColumn>

    I hope this helps.


    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.

  5. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 07 Apr 2014 in reply to Galin Link to this post

    Hello Galin,

    Thank you. Although I would change the delete icon of RadGrid to the icon of the RadTreelist:

    div.RadGrid_Silk .rgDel {
        background-position: -17px -3317px !important;
    div.RadGrid_Silk .rgDel:hover,
    div.RadGrid_Silk .rgDel:active {
        background-position: -67px -3317px !important;

Back to Top