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

Style a filtered column

10 Answers 179 Views
Grid
This is a migrated thread and some comments may be shown as answers.
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?

10 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 21 Jul 2010, 03:53 PM
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
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.
0
Pavlina
Telerik team
answered on 30 Aug 2010, 04:12 PM
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
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:

.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
Pavlina
Telerik team
answered on 02 Sep 2010, 12:48 PM
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
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.

column.HeaderStyle.Font.Bold = true;
column.HeaderStyle.ForeColor = System.Drawing.Color.Orange;
column.HeaderTooltip = "Column is filtered";
0
Pavlina
Telerik team
answered on 03 Sep 2010, 01:28 PM
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
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.
Tags
Grid
Asked by
Libby Stainer
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Libby Stainer
Top achievements
Rank 1
Rory
Top achievements
Rank 1
Share this question
or