Single filter button for all columns in RadGrid

Thread is closed for posting
2 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 17 Sep 2008 Link to this post

    Requirements
    RadControls for ASP .NET AJAX version 2008.1.415 or above
    .NET version 2.0 and later
    Visual Studio version 2005 and later
    Programming language C#
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX

     
    PROJECT DESCRIPTION
    The project demonstrates how a single filter button can be implemented to filter all columns in RadGrid. All filter images for the columns are removed and an exclusive filter button is placed in a GridTemplateColumn's HeaderTemplate. When clicked, all the values from the filter textboxes in the columns are collected and RadGrid's FilterExpression is set.

    Additionally, the project demonstrates how the GridFilteringItem can be toggled to allow or disallow filtering

    PreRender event is used to toggle the arrow image indicating whether the filtering item is displayed or hidden. The ItemCreated event retrieves the GridFiltering item if it is displayed, and removes the filter images from all the columns. The ItemCommand event is used to both toggle the filtering item and retrieve the filter values to form the filter expression of RadGrid's MasterTableView.

    ASPX
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <asp:ScriptManager ID="ScriptManager1" runat="Server"> 
        </asp:ScriptManager> 
        <div> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
         
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" AutoGenerateColumns="false" 
                Skin="Office2007" Width="800px"> 
                <MasterTableView> 
                    <Columns> 
                        <telerik:GridTemplateColumn UniqueName="CommandColumn" AllowFiltering="False"> 
                            <HeaderTemplate> 
                                <table style="width:100%"> 
                                    <tr> 
                                        <td> 
                                            <asp:ImageButton ID="ToggleFilterButton" runat="Server" CommandName="ToggleFilter" 
                                                ToolTip="Toggle filter" /> 
                                        </td> 
                                        <td> 
                                            <asp:ImageButton ID="FilterButton" runat="Server" CommandName="FilterAll"  
                                                ImageUrl="~/filter.gif" Visible="False" ToolTip="Filter"/> 
                                        </td> 
                                    </tr> 
                                </table> 
                            </HeaderTemplate> 
                            <ItemTemplate> 
                                <asp:CheckBox ID="SelectCheckBox" runat="Server" /> 
                            </ItemTemplate> 
                        </telerik:GridTemplateColumn> 
                        <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" UniqueName="EmployeeID"></telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" UniqueName="LastName"></telerik:GridBoundColumn> 
                        <telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title"></telerik:GridBoundColumn> 
                        <telerik:GridDateTimeColumn DataField="HireDate" HeaderText="HireDate" UniqueName="HireDate"></telerik:GridDateTimeColumn> 
                        <telerik:GridBoundColumn DataField="City" HeaderText="City" UniqueName="City"></telerik:GridBoundColumn> 
                    </Columns> 
                </MasterTableView> 
            </telerik:RadGrid> 
        </div> 
        <asp:AccessDataSource ID="AccessDataSource1" runat="Server" DataFile="~/App_Data/Nwind.mdb"  
            SelectCommand="SELECT [EmployeeID], [LastName], [Title], [HireDate], [City] FROM [Employees]"> 
        </asp:AccessDataSource> 
        </form> 
    </body> 
    </html> 

    C#
    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Collections; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
     
    public partial class FilterOneButton : System.Web.UI.Page 
    { 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            RadGrid1.ItemCommand += new GridCommandEventHandler(RadGrid1_ItemCommand); 
            RadGrid1.ItemCreated += new Telerik.Web.UI.GridItemEventHandler(RadGrid1_ItemCreated); 
            RadGrid1.PreRender += new EventHandler(RadGrid1_PreRender); 
        } 
     
        void RadGrid1_PreRender(object sender, EventArgs e) 
        { 
            if (RadGrid1.AllowFilteringByColumn) 
            { 
                GridHeaderItem item = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem; 
                (item["CommandColumn"].FindControl("ToggleFilterButton") as ImageButton).ImageUrl = "~/moveup.gif"; 
                (item["CommandColumn"].FindControl("FilterButton") as ImageButton).Visible = true; 
            } 
            else 
            { 
                GridHeaderItem item = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem; 
                (item["CommandColumn"].FindControl("ToggleFilterButton") as ImageButton).ImageUrl = "~/movedown.gif"; 
                (item["CommandColumn"].FindControl("FilterButton") as ImageButton).Visible = false; 
            } 
        } 
     
        void RadGrid1_ItemCommand(object source, GridCommandEventArgs e) 
        { 
            if (e.CommandName == "ToggleFilter") 
            { 
                RadGrid1.AllowFilteringByColumn = !RadGrid1.AllowFilteringByColumn; 
                RadGrid1.Rebind(); 
            } 
     
            if (e.CommandName == "FilterAll") 
            { 
                GridFilteringItem item = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem; 
                string employeeId = (item["EmployeeID"].Controls[0] as TextBox).Text; 
                string name = (item["LastName"].Controls[0] as TextBox).Text; 
                string title = (item["Title"].Controls[0] as TextBox).Text; 
                RadDatePicker picker = (item["HireDate"].Controls[0] as RadDatePicker); 
                string hireDate = picker.SelectedDate != null ? picker.SelectedDate.Value.ToShortDateString() : ""; 
                string city = (item["City"].Controls[0] as TextBox).Text; 
                string expression = ""; 
     
                if(employeeId != "") 
                    expression += "([EmployeeID] = " + employeeId + ")"; 
                if (name != "") 
                { 
                    if (expression != "") 
                        expression += " AND "; 
                    expression += "([LastName] LIKE \'%" + name + "%\')"; 
                } 
                if (title != "") 
                { 
                    if (expression != "") 
                        expression += " AND "; 
                    expression += "([Title] LIKE \'%" + title + "%\')"; 
                } 
                if (hireDate != "") 
                { 
                    if (expression != "") 
                        expression += " AND "; 
                    expression += "([HireDate] = \'" + hireDate + "\')"; 
                } 
                if (city != "") 
                { 
                    if (expression != "") 
                        expression += " AND "; 
                    expression += "([City] LIKE \'%" + city + "%\')"; 
                } 
     
                RadGrid1.MasterTableView.FilterExpression = expression; 
                RadGrid1.Rebind(); 
            } 
        } 
     
        void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e) 
        { 
            if (e.Item is GridFilteringItem) 
            { 
                GridFilteringItem item = e.Item as GridFilteringItem; 
                item["EmployeeID"].Controls[1].Visible = false; 
                item["LastName"].Controls[1].Visible = false; 
                item["Title"].Controls[1].Visible = false; 
                item["HireDate"].Controls[2].Visible = false; 
                item["City"].Controls[1].Visible = false; 
            } 
        } 
    } 

    VB.NET
     
    Imports System 
    Imports System.Data 
    Imports System.Configuration 
    Imports System.Collections 
    Imports System.Web 
    Imports System.Web.Security 
    Imports System.Web.UI 
    Imports System.Web.UI.WebControls 
    Imports System.Web.UI.WebControls.WebParts 
    Imports System.Web.UI.HtmlControls 
    Imports Telerik.Web.UI 
     
    Public Partial Class FilterOneButton 
        Inherits System.Web.UI.Page 
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) 
            AddHandler RadGrid1.ItemCommand, AddressOf RadGrid1_ItemCommand 
            AddHandler RadGrid1.ItemCreated, AddressOf RadGrid1_ItemCreated 
            AddHandler RadGrid1.PreRender, AddressOf RadGrid1_PreRender 
        End Sub 
     
        Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As EventArgs) 
            If RadGrid1.AllowFilteringByColumn Then 
                Dim item As GridHeaderItem = TryCast(RadGrid1.MasterTableView.GetItems(GridItemType.Header)(0), GridHeaderItem) 
                (TryCast(item("CommandColumn").FindControl("ToggleFilterButton"), ImageButton)).ImageUrl = "~/moveup.gif" 
                (TryCast(item("CommandColumn").FindControl("FilterButton"), ImageButton)).Visible = True 
            Else 
                Dim item As GridHeaderItem = TryCast(RadGrid1.MasterTableView.GetItems(GridItemType.Header)(0), GridHeaderItem) 
                (TryCast(item("CommandColumn").FindControl("ToggleFilterButton"), ImageButton)).ImageUrl = "~/movedown.gif" 
                (TryCast(item("CommandColumn").FindControl("FilterButton"), ImageButton)).Visible = False 
            End If 
        End Sub 
     
        Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) 
            If e.CommandName = "ToggleFilter" Then 
                RadGrid1.AllowFilteringByColumn = Not RadGrid1.AllowFilteringByColumn 
                RadGrid1.Rebind() 
            End If 
     
            If e.CommandName = "FilterAll" Then 
                Dim item As GridFilteringItem = TryCast(RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)(0), GridFilteringItem) 
                Dim employeeId As String = (TryCast(item("EmployeeID").Controls(0), TextBox)).Text 
                Dim name As String = (TryCast(item("LastName").Controls(0), TextBox)).Text 
                Dim title As String = (TryCast(item("Title").Controls(0), TextBox)).Text 
                Dim picker As RadDatePicker = (TryCast(item("HireDate").Controls(0), RadDatePicker)) 
                Dim hireDate As String = IIf(picker.SelectedDate <> Nothing,picker.SelectedDate.Value.ToShortDateString(),"") 
                Dim city As String = (TryCast(item("City").Controls(0), TextBox)).Text 
                Dim expression As String = "" 
     
                If employeeId <> "" Then 
                    expression += "([EmployeeID] = " + employeeId + ")" 
                End If 
                If name <> "" Then 
                    If expression <> "" Then 
                        expression += " AND " 
                    End If 
                    expression += "([LastName] LIKE '%" + name + "%')" 
                End If 
                If title <> "" Then 
                    If expression <> "" Then 
                        expression += " AND " 
                    End If 
                    expression += "([Title] LIKE '%" + title + "%')" 
                End If 
                If hireDate <> "" Then 
                    If expression <> "" Then 
                        expression += " AND " 
                    End If 
                    expression += "([HireDate] = '" + hireDate + "')" 
                End If 
                If city <> "" Then 
                    If expression <> "" Then 
                        expression += " AND " 
                    End If 
                    expression += "([City] LIKE '%" + city + "%')" 
                End If 
     
                RadGrid1.MasterTableView.FilterExpression = expression 
                RadGrid1.Rebind() 
            End If 
        End Sub 
     
        Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) 
            If TypeOf e.Item Is GridFilteringItem Then 
                Dim item As GridFilteringItem = TryCast(e.Item, GridFilteringItem) 
                item("EmployeeID").Controls(1).Visible = False 
                item("LastName").Controls(1).Visible = False 
                item("Title").Controls(1).Visible = False 
                item("HireDate").Controls(2).Visible = False 
                item("City").Controls(1).Visible = False 
            End If 
        End Sub 
    End Class 
  3. CF04F382-A994-4C3A-93EE-FED28AC8E0EC
    CF04F382-A994-4C3A-93EE-FED28AC8E0EC avatar
    2002 posts
    Member since:
    Mar 2023

    Posted 07 Dec 2011 Link to this post

    The above demonstrated approach uses default filter functions for all columns in RadGrid. Filter function menus in the columns are hidden and a user cannot change the filter value that will be used for this column when filtering.

    When users need to be allowed to change the filter function for every column, the approach is different. In this case, we do not hide the filter menus, only prevent filtering when a menu item is clicked. Filters are then collected on the client-side using javascript and sent to the server when the single filter button is clicked.

    On the server, in the ItemCommand event handler, the filtering data is parsed and respective columns have their filters set. Thus, the approach demonstrated in the sample project attached to this comment allows for a single filter button without limiting the user to use predefined filter functions.

    Veli
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top

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