Currently the grid Filtering menu appearance can be customized through the attributes of the FilterMenu class or automatically through the corresponding skins filter menu class (named .GridFilterMenu_<SkinName>). These are the default settings:
| ASPX/ASCX |
 Copy Code |
|
<rad: RadGrid id="RadGrid1" runat="server">
...
<FilterMenu HoverBackColor="LightSteelBlue" HoverBorderColor="Navy" NotSelectedImageUrl="~/RadControls/Grid/Skins/Default/NotSelectedMenu.gif"
SelectColumnBackColor="Control" SelectedImageUrl="~/RadControls/Grid/Skins/Default/SelectedMenu.gif"
TextColumnBackColor="Window"></FilterMenu>
</rad:RadGrid> |
An additional option you have is to set CssClass for the entire filtering menu (suitable for customizing the font, font-size, color, etc. of the filtering menu items). Note that you have to strip the values set for the SelectColumnBackColor/TextColumnBackColor properties which are defined automatically through the embedded web resources (available in the ASP.NET 2.0 version of our web grid since version 3.5.0 of the control).
 |
Note that the filter menu customization is available since version 3.1 of Telerik RadGrid |
| ASPX/ASCX |
Copy Code |
|
<head runat="server">
<title>Filter menu change</title>
<style type="text/css">
.FilterMenuClass1 td
{
background-color: white;
color: green;
font-size: 10px;
}
.FilterMenuClass2 td
{
background-color: blue;
color: white;
font-size: 15px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function GridCreated()
{
window.setTimeout(SetFilterMenuClass(this), 500);
}
function SetFilterMenuClass(gridObject)
{
gridObject.FilterMenu.SelectColumnBackColor = "";
gridObject.FilterMenu.TextColumnBackColor = "";
}
</script>
<rad:RadGrid ID="RadGrid1" AllowFilteringByColumn="true" DataSourceID="AccessDataSource1"
AllowSorting= "True" runat="server">
<FilterMenu CssClass="FilterMenuClass1"></FilterMenu>
<ClientSettings>
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
</rad:RadGrid>
<br />
<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb"
SelectCommand= "SELECT TOP 10 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
runat= "server"></asp:AccessDataSource>
<rad:RadGrid ID="RadGrid2" DataSourceID="AccessDataSource1" AllowSorting="True"
AllowFilteringByColumn= "true" Skin="Windows" runat="server">
<ClientSettings>
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
<FilterMenu CssClass="FilterMenuClass2"></FilterMenu>
</rad:RadGrid>
</div>
</form>
</body>
</html> |