Visually indicate filtered columns in RadGrid with Excel-Like Filtering

1 posts, 0 answers
  1. Attila Antal
    Admin
    Attila Antal avatar
    164 posts

    Posted 01 Jun Link to this post

    Requirements

    Telerik Product and Version

    3.5+

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    ASP.NET, C#.NET, VB.NET, CSS


    PROJECT DESCRIPTION 
    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


    SOLUTION

    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.

    C#

    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;
        }
    }


    VB
    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)
        Next
    End Sub


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

    CSS

    <style>
        .rgMasterTable th.filteredColumn {
            background-color: limegreen;
        }
    </style>

     

Back to Top