Apply Custom Style To A Filtered Column

[Stacey Haslag]

I am using a RadGridView. When a filter is applied to a column, I want to make that column STAND OUT.

I want to do this by changing the font color, or changing the font size, or changing the background color...something like that. I would like this style applied to just the column heading of the column that has a filter applied.  When the filter is cleared, I obviously want to have the column "go back to normal".

How do I accomplish this?

Anxiously awaiting an answer...thanks!
Stacey

[Vanya Pavlova]

Hi Stacey,

 

You may subscribe to the RadGridView's Filtered event where you can execute some custom code when the data in the RadGridView gets filtered, please refer to the markup below:

MainPage.xaml:

<UserControl.Resources>
        <Style x:Key="style1" TargetType="telerik:GridViewHeaderCell">
            <Setter Property="Background" Value="Red"/>
        </Style>
        <Style x:Key="style2" TargetType="telerik:GridViewHeaderCell"/>

    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <telerik:RadGridView x:Name="radGridView" ItemsSource="{Binding Collection}" Margin="24,32,32,56" Filtered="radGridView_Filtered_1"/>
    </Grid>

MainPage.xaml.cs:

private void radGridView_Filtered_1(object sender, Telerik.Windows.Controls.GridView.GridViewFilteredEventArgs e)
       {
           foreach (FilterDescriptor descriptor in e.Added)
           {
               GridViewColumn column = this.radGridView.Columns[descriptor.Member];
               column.Background = new SolidColorBrush(Colors.Green);
               column.HeaderCellStyle = this.Resources["style1"] as Style;
           }
           foreach (FilterDescriptor descriptor in e.Removed)
           {
               GridViewColumn column = this.radGridView.Columns[descriptor.Member];
               column.Background = new SolidColorBrush(Colors.Transparent);
               column.HeaderCellStyle = this.Resources["style2"] as Style;
           }
       }

You may read more about filtering in our online documentation, please follow this link.

Kind regards,
Vanya Pavlova
the Telerik team

[Stacey Haslag]

Thank you for your prompt reply. This was a wonderfully simple solution to get the styling working exactly the way I want. I have implemented the code you gave, and the style is applied when a Filter is applied to a column. Excellent!

However, this is causing another issue...once a style is applied, the filtering seems to be disabled; if I try to click on the column filter so that I can either change the filter or clear the filter, nothing happens. I get the "hand" to appear when I hover over the filter icon, so it appears that the filter link still exists. But when I click, no filter box appears. So I can never clear my filter once it's applied.

The filtering still works on all the other columns that do not have a filter applied yet.

(For now, I am just working with exactly what you have in your code example - setting the background color of the HeaderCellStyle)

[Vanya Pavlova]

Hello Stacey,

 

I have prepared an example for you following the approach suggested in my previos post.
However everything works fine by my side. May you please check the attachment and let me know how it differs from yours? Also it could be great if you can send is in a new support ticket small repro application where we can see what might be causing such a behavior. 

Greetings,
Vanya Pavlova
the Telerik team

[Stacey Haslag]

Okay, I found the problem. I am using the Windows7 theme on my GridView. If I remove this theme from the GridView, then your code works perfectly for me as well. Can you try applying the Windows7 theme to your sample,and see if it breaks for you too?

Here is my GridView tag with the Windows7 theme applied:

<telerik:RadGridView x:Name="RadResultsGrid" Margin="0, 5, 0, 0" IsReadOnly="True" FontWeight="Bold"
AutoGenerateColumns="False"  SelectionMode="Single" ItemsSource="{Binding PagedSource, ElementName=radDataPager}"
telerik:StyleManager.Theme="Windows7" ShowGroupPanel="False" RowIndicatorVisibility="Collapsed"
filtered="RadResultsGrid_Filtered">

[Vanya Pavlova]

Hello Stacey,

 

When you change the theme such an implementation of the RadGridView's Filtered event is not acceptable, because this will interfere with the internal logic of RadGridView. In such case the approach would be a little bit different:

private void gridView_Filtered(object sender, Telerik.Windows.Controls.GridView.GridViewFilteredEventArgs e)
       {
           foreach (FilterDescriptor descriptor in e.Added)
           {
               var column = (GridViewBoundColumnBase)e.ColumnFilterDescriptor.Column as GridViewBoundColumnBase;
               column.Background = new SolidColorBrush(Colors.Green);

               var hc = this.gridView.ChildrenOfType<GridViewHeaderCell>()
                   .Where(headerCell => headerCell.Column == column)
                   .FirstOrDefault();

               if (hc != null)
               {
                   hc.Background = new SolidColorBrush(Colors.Green);
               }
           }

           foreach (FilterDescriptor descriptor in e.Removed)
           {
               var column = (GridViewBoundColumnBase)e.ColumnFilterDescriptor.Column as GridViewBoundColumnBase;
               column.Background = new SolidColorBrush(Colors.Transparent);

               var hc = this.gridView.ChildrenOfType<GridViewHeaderCell>()
                   .Where(headerCell => headerCell.Column == column)
                   .FirstOrDefault();

               if (hc != null)
               {
                   hc.Background = new SolidColorBrush(Colors.Transparent);
               }
           }
       }

In a similar manner you may change different properties of the GridViewHeaderCell such as FontSize, Foreground etc. 


Hope this helps!

 

Kind regards,
Vanya Pavlova
the Telerik team

[Stacey Haslag]

The line does not work for me:

var column = (GridViewBoundColumnBase)e.ColumnFilterDescriptor.Column as GridViewBoundColumnBase;

It tells me that GridViewFilteredEventArgs does not contain a definition for "ColumnFilterDescriptor"...

Do I need to add a reference to something?

[Vanya Pavlova]

Hello Stacey,

 
You may find attached sample application that demonstrates the proposed solution.
If you need any further assistance do not hesitate to contact us!

Kind regards,
Vanya Pavlova
the Telerik team

[Stacey Haslag]

I downloaded your sample, and I get the same error message in your project...It tells me that GridViewFilteredEventArgs does not contain a definition for "ColumnFilterDescriptor".

The runtime version on my Teleril.Windows.Controls.dll is v2.0.50727; do I need to get an upgrade in order to get this property?

[Vanya Pavlova]

Hello Stacey,


  
A ColumnFilterDescriptor property has been added in our Q3 2010 SP1. You need to have at least this version of the product in order to use it.



All the best,
Vanya Pavlova
the Telerik team

[Stacey Haslag]

Okay, I will talk to our team and upgrade our version. This might take a day or two. I will follow up once I am able to upgrade.

Thanks for all of your help!

Stacey

[Stacey Haslag]

Okay, so I have this working the way I want. Thank you for all of your help.

I had to upgrade my Telerik to the newest version so I could use the "ColumnFilterDescriptor".

I also revised the event logic slightly; your code was mostly working the way I wanted, except when I had multiple filter criterias selected on a column, if I cleared one out but other filter criteria still existed, it got rid of the custom style anyway. Below is logic that is turning on/off the filter style the way I want - when I want; but I would never have gotten this far without your help. Thanks!

private void RadResultsGrid_Filtered(object sender, GridViewFilteredEventArgs e)
{
    if (e.ColumnFilterDescriptor != null)
    {
        var column = (GridViewBoundColumnBase)e.ColumnFilterDescriptor.Column as GridViewBoundColumnBase;
        var columnHeader = this.RadResultsGrid.ChildrenOfType<GridViewHeaderCell>()
            .Where(headerCell => headerCell.Column == column).FirstOrDefault();
        if (columnHeader != null)
        {
            if (e.ColumnFilterDescriptor.IsActive == true)
                columnHeader.Foreground = new SolidColorBrush(Colors.Red);

            if (e.ColumnFilterDescriptor.IsActive == false)
                columnHeader.Foreground = new SolidColorBrush(Color.FromArgb(0xFF, 0x4C, 0x60, 0x7A));
        }
    }
}

[Rossen Hristov]

Hello Stacey Haslag,

Maybe there is another easier approach.

Each time a column filter is being activated (the funnel lights up), the respective ColumnFilterDescriptor is added to the FilterDescriptors collection of RadGridView.

Respectively, when the last filtering criteria is removed (the funnel is switched off), i.e. the column is being un-filtered, this same ColumnFilterDescriptor  is removed from the FilterDescriptors collection of RadGridView.

So, if you attach to the CollectionChanged event of RadGridView.FilterDescriptors, you can do your logic each time a ColumnFilterDescriptor is added or removed from the collection. You can check this from the event arguments. The item being added or removed will the ColumnFilterDescriptor of interest.

I think that this will be a cleaner approach.

Kind regards,
Ross
the Telerik team

[Stacey Haslag]

Hi Ross,
Thanks for the suggestion - a cleaner approach is always welcome! I was not sure if I was using the "ColumnFieldDescriptor.IsActive" the way it was intened to be used or not.

I put in the FilteredDescriptors_CollectionChanged event handling logic, and yep, that seems to fire exactly when I want it to, and I am able to apply my styling to the column header of the filtered column.

I have a question though - when there is no more filter applied, and I go through the "removed" logic in this event, how do I know what column I need to remove my styling on?

Here is the code I have working so far:

private void FilterDescriptors_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    switch (e.Action)
    {
        case System.Collections.Specialized.NotifyCollectionChangedAction.Add:
            if (e.NewItems.Count == 1)
            {
                var columnFilterDescriptor = e.NewItems[0] as ColumnFilterDescriptor;
                if (columnFilterDescriptor != null)
                {
                    var column = (GridViewBoundColumnBase)columnFilterDescriptor.Column as GridViewBoundColumnBase;
                    if (column != null)
                    {
                        var columnHeader = this.RadResultsGrid.ChildrenOfType<GridViewHeaderCell>()
                                               .Where(headerCell => headerCell.Column == column).FirstOrDefault();
                        if (columnHeader != null)
                            columnHeader.Foreground = new SolidColorBrush(Colors.Red);
                    }
                }
            }
            break;
        case System.Collections.Specialized.NotifyCollectionChangedAction.Remove:
            if (e.NewItems == null)
            {
                //Need to remove filtered style from the appropriate column heading
            }
            break;
    }
}

[Rossen Hristov]

Hi Stacey Haslag,

Please, take a look at this MSDN page. It contains the answer you are looking for.

Regards,

Ross
the Telerik team

[Stacey Haslag]

Excellent, thank you!