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

Telerik grid filter button color change

1 Answer 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pardha Saradhi
Top achievements
Rank 1
Pardha Saradhi asked on 25 Nov 2010, 06:13 AM
Hi,

I would like to change the Telirk grid filter icon to be hilighted to know when the filter is applied on the specified column.

for ex:- i have attached one screen shot, in that ShipCountry=France is given, so once if the searching is done, then the filter icon(marked in the screen shot) should be hilighted/should change background  color

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Nov 2010, 10:35 AM
Hello Pardha,

Please review the following demo. Note two things:

1. The button's background will be restored if you open the filtering menu and close it without choosing anything. That's why I have demonstrated also how to apply a custom background color to the respective filtering item cell.

2. The demo shows how to iterate through both the autogenerated and non-autogenerated columns. You can remove the one foreach statement that you don't need.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
<script runat="server">
  
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int colsNum = 4;
    int rowsNum = 6;
    string colName = "Column";
  
    for (int j = 1; j <= colsNum; j++)
    {
        dt.Columns.Add(String.Format("{0}{1}", colName, j));
    }
  
    for (int i = 1; i <= rowsNum; i++)
    {
        dr = dt.NewRow();
  
        for (int k = 1; k <= colsNum; k++)
        {
            dr[String.Format("{0}{1}", colName, k)] = "aa" + i;
        }
        dt.Rows.Add(dr);
    }
  
    (sender as RadGrid).DataSource = dt;
}
  
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
     
}
 
protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        foreach (GridColumn col in (sender as RadGrid).MasterTableView.AutoGeneratedColumns)
        {
            if (col is GridBoundColumn && (sender as RadGrid).MasterTableView.FilterExpression.IndexOf("[" + (col as GridBoundColumn).DataField + "]") != -1)
            {
                ((e.Item as GridFilteringItem)[col.UniqueName].Controls[1] as Button).CssClass = "rgFilter rgFilterActive";
                (e.Item as GridFilteringItem)[col.UniqueName].BackColor = System.Drawing.Color.Yellow;
            }
        }
        foreach (GridColumn col in (sender as RadGrid).MasterTableView.Columns)
        {
            if (col is GridBoundColumn && (sender as RadGrid).MasterTableView.FilterExpression.IndexOf("[" + (col as GridBoundColumn).DataField + "]") != -1)
            {
                ((e.Item as GridFilteringItem)[col.UniqueName].Controls[1] as Button).CssClass = "rgFilter rgFilterActive";
                (e.Item as GridFilteringItem)[col.UniqueName].BackColor = System.Drawing.Color.Yellow;
            }
        }
    }
}
     
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
  
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Skin="Office2007"
    AllowFilteringByColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource"
    OnItemCreated="RadGrid_ItemCreated" OnPreRender="RadGrid1_PreRender">
</telerik:RadGrid>
  
</form>
</body>
</html>


All the best,
Dimo
the Telerik team
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Grid
Asked by
Pardha Saradhi
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or