
Libby Stainer
Top achievements
Rank 1
Libby Stainer
asked on 19 Jul 2010, 12:34 PM
I would like to visually distinguish a column which has a filter applied, much like you can with a sorted column using .rgSorted in the CSS.
I would be happy if I could change the background colour of a filtered column, or even just change the background colour of the filter box.
Is there any way to achieve this?
I would be happy if I could change the background colour of a filtered column, or even just change the background colour of the filter box.
Is there any way to achieve this?
10 Answers, 1 is accepted
0
Hello Libby,
Please try to use the code snippet below in order to achieve your goal:
CSS:
I hope this helps.
All the best,
Pavlina
the Telerik team
Please try to use the code snippet below in order to achieve your goal:
CSS:
.RadGrid_[SkinName] .rgFilterBox
{
color
:
#333
;
}
I hope this helps.
All the best,
Pavlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0

Libby Stainer
Top achievements
Rank 1
answered on 21 Jul 2010, 04:00 PM
Hmm, it's not really a complete solution, but thanks for the effort.
0

Rory
Top achievements
Rank 1
answered on 25 Aug 2010, 11:24 PM
I'm looking to do the same. There is no clear indicator that a column was or is sorted. Now that there are Header Context Menu Filters it can be even more mysterious as to which rows are filtered. HAs anyone got an answer for us?
Thanks.
Thanks.
0
Hello Rory,
More information about how to modify an existing RadGrid skin is available in the online resources below:
Modifying existing skins/creating new skins
How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin
Greetings,
Pavlina
the Telerik team
More information about how to modify an existing RadGrid skin is available in the online resources below:
Modifying existing skins/creating new skins
How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin
Greetings,
Pavlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0

Rory
Top achievements
Rank 1
answered on 30 Aug 2010, 05:04 PM
We are very familiar with radgrid skins and we have deployed a custom skin which works great. The radgrid skin however doesn't seem to have a css style for a column that has been filtered.
For instance a column that is sorted has this style:
For instance a column that is sorted has this style:
.RadGrid_WebBlue
th.rgSorted {....}
AND
.RadGrid_WebBlue .rgSelectedRow .rgSorted {...}
BUT there is nothing for filtered column like so:
.RadGrid_WebBlue th.rgFiltered {...}
AND
.RadGrid_WebBlue .rgSelectedRow .rgFiltered {...}
Since this style doesn't exist would there be another way to identify and style the header Item when the column has been filtered? We tried catching the header item on item command of the grid filter action but there isn't a clear indicator which header item belongs to the filter. Please advise.
Thanks.
0
Accepted

Rory
Top achievements
Rank 1
answered on 31 Aug 2010, 05:54 PM
I got the fix. Mark as answer if this works for you too. Thanks.
protected
void
rgFeedback_ItemCommand(
object
source, GridCommandEventArgs e)
{
if
(e.CommandName == RadGrid.HeaderContextMenuFilterCommandName)
{
Triplet arguments = e.CommandArgument
as
Triplet;
Pair filter1 = arguments.Second
as
Pair;
Pair filter2 = arguments.Third
as
Pair;
GridColumn column = (source
as
RadGrid).MasterTableView.GetColumn(arguments.First.ToString());
if
(filter1.First.ToString() ==
"NoFilter"
&& filter2.First.ToString() ==
"NoFilter"
)
column.ItemStyle.CssClass =
""
;
else
column.ItemStyle.CssClass =
"rgFilterClass"
;
}
}
<
style
type
=
"text/css"
>
.RadGrid .rgMasterTable td.rgFilterClass
{
background-color: #eee;
border-bottom-color: #eee ;
}
</
style
>
0
Hello Rory,
I am glad that you managed to find a solution. In case you experience any other problems or you have additional questions, do not hesitate to contact us again!
Best wishes,
Pavlina
the Telerik team
I am glad that you managed to find a solution. In case you experience any other problems or you have additional questions, do not hesitate to contact us again!
Best wishes,
Pavlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Accepted

Rory
Top achievements
Rank 1
answered on 02 Sep 2010, 05:35 PM
Also forgot to put how to style the header too.
In the same place we set the column.ItemStyle.CssClass. Do this.
In the same place we set the column.ItemStyle.CssClass. Do this.
column.HeaderStyle.Font.Bold =
true
;
column.HeaderStyle.ForeColor = System.Drawing.Color.Orange;
column.HeaderTooltip =
"Column is filtered"
;
0
Hello Rory,
Thank you for the addition. I am sure it would be helpful for anyone searching such functionality.
All the best,
Pavlina
the Telerik team
Thank you for the addition. I am sure it would be helpful for anyone searching such functionality.
All the best,
Pavlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0

Libby Stainer
Top achievements
Rank 1
answered on 08 Sep 2010, 10:30 AM
Much appreciated Rory - neat solution.