7 Answers, 1 is accepted
Rank 2
The following CSS will be helpful for you in changing the default icons.
CSS:
<style type="text/css"> .rgCollapse { background-image: url('../Images/Icons/img1.gif') !important; background-position: 0px 0px !important; } .rgExpand { background-image: url('../Images/Icons/img2.gif') !important; background-position: 0px 0px !important; } </style> Thanks,
Princy.
Rank 1
I have a problem with this. It is not showing the image that i desired. Instead it has remove the existing image as well. Is there specific size limit for the icon.?
Regards,
Niraj Khose
Rank 2
Please check the image path that you have given in the CSS is correct. Also refer the following forum which explains the same.
Change expand collapse image of radgrid
Thanks,
Princy.
Rank 1
Its still not working. It is removing the default image. But its not loading the new.
Regards,
Niraj Khose
Could you please paste the CSS that you use and attach the image in question? We will test it on our side to see if there is anything wrong.
All the best,
Tsvetina
the Telerik team
Rank 1
I have attached a aspx,css and the image file to this post , please tell me how can i change my expand/collapse icon in this.??
Your proposed solution does not load the new image to the expand/collapse icon. But it removes the default expand/ collapse icon as i mentioned earlier.
Regards,
Niraj Khose.
ASPX code :
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>
</title>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
AllowPaging="True" AllowSorting="True" GridLines="None"
ShowGroupPanel="True" onneeddatasource="RadGrid1_NeedDataSource" >
<ClientSettings AllowDragToGroup="True">
</ClientSettings>
<MasterTableView>
<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
<ExpandCollapseColumn >
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
</Columns>
</MasterTableView>
<HeaderContextMenu EnableImageSprites="True" CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
</telerik:RadGrid>
</form>
</body>
</html>
CSS File :
.rgCollapse
{
background-image: url('~/Images/1294727542_toggle-small-expand.png') !important;
background-position: 0px0px!important;
}
.rgExpand
{
background-image: url('~/Images/1294727542_toggle-small-expand.png') !important;
background-position: 0px0px!important;
}
In order to have custom expand/collapse buttons, you can create the appropriate background images and set them to the following CSS rules:
.RadGrid_SkinName input.rgExpand
{
background:url(.....) center center no-repeat;
}
.RadGrid_SkinName input.rgCollapse
{
background:url(.....) center center no-repeat;
}
Moreover, I am sending you a simple test project that demonstrates how to achieve your goal.
I hope this helps.
All the best,
Pavlina
the Telerik team