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
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
0
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:
And the CSS:
You could use the same for changing the image of the button.
Hope that helps.
Regards,
Konstantin Dikov
Telerik
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 ,
And the CSS:
[/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
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>
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#:
Thanks,
Princy
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?
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:
C#:
Thanks,
Princy
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