Visually indicate filtered columns in RadGrid with Excel-Like Filtering

Thread is closed for posting
2 posts, 0 answers
  1. Attila Antal
    Attila Antal avatar
    631 posts

    Posted 01 Jun 2018 Link to this post


    Telerik Product and Version


    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)


    Code Library sample describing how to configure RadGrid with Excel-Like filtering to visually indicate columns that have filters applied.

    For the simplicity of this article, we are only applying CSS rules to change the Background color of the Column header, however, it can be customized in many different ways. It is all up to the developer's imagination.

    By default, columns do not indicate whether filters are applied while Excel-Like filtering is enabled, hence the resulting view could be confusing from the user's perspective.

    RadGrid Filtered Column without Indicator

    RadGrid Filtered Column without Indicator Filterlist

    Yet, it can be improved to provide a better user experience. See the results below:

    RadGrid Filtered Column with Indicator
    RadGrid Filtered Column with Indicator Filterlist


    Here are few steps we've used to achieve the described scenario.

    First, we'll subscribe the RadGrid to its PreRender event, which we will use to loop through each column and verify whether filters are applied. At this point, we are able to verify the ListOfFilterValues collection (populated by the FilterCheckList) and the CurrentFilterValues (populated by the FilterMenu located below the filterCheckList) for existing values. If any of them are populated, we will then assign a CSS classname to the Column's header.


    protected void RadGrid1_PreRender(object sender, EventArgs e)
        foreach (GridColumn col in (sender as RadGrid).MasterTableView.RenderColumns)
            col.HeaderStyle.CssClass = (!string.IsNullOrEmpty(col.CurrentFilterValue) || col.ListOfFilterValues != null && col.ListOfFilterValues.Length > 0) ? "filteredColumn" : string.Empty;

    Protected Sub RadGrid1_PreRender(sender As Object, e As EventArgs)
        For Each col As GridColumn In TryCast(sender, RadGrid).MasterTableView.RenderColumns
            col.HeaderStyle.CssClass = If(Not String.IsNullOrEmpty(col.CurrentFilterValue) Or col.ListOfFilterValues IsNot Nothing AndAlso col.ListOfFilterValues.Length > 0, "filteredColumn", String.Empty)
    End Sub

    Finally, the CSS class that will contain the rule to paint the Column Header background.


        .rgMasterTable th.filteredColumn {
            background-color: limegreen;


  2. vic
    vic avatar
    1 posts
    Member since:
    Jan 2008

    Posted 26 Jan 2019 in reply to Attila Antal Link to this post

    Thanks for posting this.  Exactly what I was looking for.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.