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

Radgrid delete icon in silk skin

4 Answers 296 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 2
Erik asked on 02 Apr 2014, 12:27 PM
Hello,

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!)

Regards,

Erik

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 04 Apr 2014, 11:59 AM
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.

Thanks,
Shinu.
0
Erik
Top achievements
Rank 2
answered on 04 Apr 2014, 12:16 PM
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.

Erik
0
Galin
Telerik team
answered on 07 Apr 2014, 01:04 PM
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">
    <title>RadControls</title>
    <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;
        }
    </style>
 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
 
        </script>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <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">
                <Columns>
                    <telerik:TreeListBoundColumn DataField="ParentId" UniqueName="ParentId" HeaderText="ParentId" Display="false">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="Position" UniqueName="Position" HeaderText="Position">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListButtonColumn CommandName="Edit" HeaderText="Edit" UniqueName="EditCommandColumn" ButtonType="ImageButton" ></telerik:TreeListButtonColumn>
                    <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" HeaderText="Delete" CommandName="Delete" ButtonType="ImageButton"></telerik:TreeListButtonColumn>
                </Columns>
            </telerik:RadTreeList>
        </div>
        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid_NeedDataSource" Height="300px"
             Skin="Silk"
            AllowSorting="True" PageSize="20" AllowPaging="True">
            <MasterTableView AllowFilteringByColumn="True" TableLayout="Fixed">
                <Columns>
                    <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>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </form>
</body>
</html>

I hope this helps.

Regards,
Galin
Telerik
 

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.

 
0
Erik
Top achievements
Rank 2
answered on 07 Apr 2014, 03:53 PM
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;
}

Erik
Tags
Grid
Asked by
Erik
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Erik
Top achievements
Rank 2
Galin
Telerik team
Share this question
or