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

Filter button Icon change for checklist filtering in RadGrid

5 Answers 229 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aminul
Top achievements
Rank 1
Aminul asked on 08 Jan 2014, 12:33 PM
HI
I am using checklist filtering in RagGrid. But I want to change filter button icon for active filter and default state.
Is it possible to have the default state of the dropdown icon to be an arrow, or the standard downward pointing triangle, and then if the filter is active, meaning the user has filtered the list, then change from arrow to funnel like you have now?
If yes, then how can i do this. please see an example.

Thanks

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 13 Jan 2014, 09:56 AM
Hello Md Aminul,

For achieving the desired result you could handle the server-side PreRender event of the grid, , traverse through each of the rendered column and check if the filter function for the column differs from "NoFilter". If so, you can add a custom CSS class to the filter button for an example and customize it as you please.

Bellow is a simple example of the above approach and a test class "filterApplied" which adds green border around the filter icon if there is filter applied:
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    GridItem[] _filterItems = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem);
    GridFilteringItem filterItem = _filterItems[0] as GridFilteringItem;
    foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
    {
        if (column.CurrentFilterFunction != GridKnownFunction.NoFilter)
        {
            (filterItem[column.UniqueName].Controls[1] as Button).CssClass += "filterApplied";
        }
        else
        {
            (filterItem[column.UniqueName].Controls[1] as Button).CssClass += "filterNotApplied";
        }
    }
}


And the CSS:
<style type="text/css" >
    .filterApplied {
        border: 1px solid green !important;
    }
 
    .filterNotApplied {
        border: 1px solid #555555 !important;
    }
</style>

You could use the same for changing the image of the button.

Hope that helps.


Regards,
Konstantin Dikov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Iffat
Top achievements
Rank 1
answered on 10 Jul 2014, 11:47 AM
Hi Konstantin , 

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    GridItem[] _filterItems = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem);
    GridFilteringItem filterItem = _filterItems[0] as GridFilteringItem;
    foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
    {
        if (column.CurrentFilterFunction != GridKnownFunction.NoFilter)
        {
            (filterItem[column.UniqueName].Controls[1] as Button).CssClass += "filterApplied";
        }
        else
        {
            (filterItem[column.UniqueName].Controls[1] as Button).CssClass += "filterNotApplied";
        }
    }
}


And the CSS:
<style type="text/css" >
    .filterApplied {
        border: 1px solid green !important;
    }
 
    .filterNotApplied {
        border: 1px solid #555555 !important;
    }
</style>

 
[/quote]

I followed this and it works. But I need something more. I need to change the column header color of filtered column too. Any idea how to achieve that?

Regards
Iffat
0
Princy
Top achievements
Rank 2
answered on 10 Jul 2014, 12:35 PM
Hi Iffat,

You can use the same code and set the HeaderStyle property of that column.

C#:
void RadGrid1_PreRender(object sender, EventArgs e)
{
  GridItem[] _filterItems = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem);
  GridFilteringItem filterItem = _filterItems[0] as GridFilteringItem;
  foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
  {
   if (column.CurrentFilterFunction != GridKnownFunction.NoFilter)
   {
    RadGrid1.MasterTableView.GetColumn(column.UniqueName).HeaderStyle.ForeColor = Color.Red;
   }
   else
   {
    RadGrid1.MasterTableView.GetColumn(column.UniqueName).HeaderStyle.ForeColor = Color.Empty;
   }
  }
}

Thanks,
Princy
0
Iffat
Top achievements
Rank 1
answered on 10 Jul 2014, 12:44 PM
Hi Princy,
Thanks a lot for your reply. I applied your code snippet into my code. However it is not changing the header color. Do I need to rebind the grid again?
0
Princy
Top achievements
Rank 2
answered on 11 Jul 2014, 03:29 AM
Hi Iffat,

I was able to get it to work without a Rebind. Try this sample code snippet and check if it works, if this doesn't help, share your full code.

ASPX:
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true" OnNeedDataSource="RadGrid1_NeedDataSource" OnPreRender="RadGrid1_PreRender">
    <MasterTableView>
        <Columns>
         <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" />
         <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
         <telerik:GridBoundColumn DataField="Number" HeaderText="Number" UniqueName="Number" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
new { ID = 1, Name = "Name1", Number=123},
new { ID = 2, Name = "Name2", Number=234},
new { ID = 3, Name = "Name3", Number=234},
new { ID = 4, Name = "Name1", Number=456},
new { ID = 5, Name = "Name3", Number=567},
new { ID = 6, Name = "Name4", Number=567},
new { ID = 7, Name = "Name7", Number=789},
new { ID = 8, Name = "Name2", Number=896},
new { ID = 9, Name = "Name1", Number=741}
};
    RadGrid1.DataSource = data;
}
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    GridItem[] _filterItems = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem);
    GridFilteringItem filterItem = _filterItems[0] as GridFilteringItem;
    foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
    {
        if (column.CurrentFilterFunction != GridKnownFunction.NoFilter)
        {
         RadGrid1.MasterTableView.GetColumn(column.UniqueName).HeaderStyle.ForeColor = Color.Red;              
        }
        else
        {
         RadGrid1.MasterTableView.GetColumn(column.UniqueName).HeaderStyle.ForeColor = Color.Empty;               
        }
    }
}

Thanks,
Princy
Tags
Grid
Asked by
Aminul
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Iffat
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or