Style a filtered column

[Libby Stainer]

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?

[Pavlina]

Hello Libby,

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

[Libby Stainer]

Hmm, it's not really a complete solution, but thanks for the effort.

[Rory]

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.

[Pavlina]

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

[Rory]

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:

.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.

[Rory]

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>

[Pavlina]

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

[Rory]

Also forgot to put how to style the header too.
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";

[Pavlina]

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

[Libby Stainer]

Much appreciated Rory - neat solution.