Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Filter / RadGrid filtering with RadFilter

OrderIDOrderDateShipViaShipNameShipAddressFreight
12345678910...
Page size:
select
 830 items in 83 pages
1024807/04/19963Vins et alcools Chevalier59 rue de l'Abbaye32.38
1024907/05/19961Toms SpezialitätenLuisenstr. 4811.61
1025007/08/19962Hanari CarnesRua do Paço, 6765.83
1025107/08/19961Victuailles en stock2, rue du Commerce41.34
1025207/09/19962Suprêmes délicesBoulevard Tirou, 25551.30
1025307/10/19962Hanari CarnesRua do Paço, 6758.17
1025407/11/19962Chop-suey ChineseHauptstr. 3122.98
1025507/12/19963Richter SupermarktStarenweg 5148.33
1025607/15/19962Wellington ImportadoraRua do Mercado, 1213.97
1025707/16/19963HILARION-AbastosCarrera 22 con Ave. Carlos Soublette #8-3581.91

  • This demo illustrates how to filter RadGrid using RadFilter control. For this purpose a few steps must be followed:

    • RadFilter's FilterContainerID property must point to a RadGrid instance.
    • AllowFilteringByColumn must be set to true to enable RadGrid filtering
    • [optional]IsFilterItemExpanded set to false to hide the built-in RadGrid's filtering item

    When bound RadGrid will supply information for all filterable columns to RadFilter that can be used to build filter expressions. If there are columns with AllowFiltering set to false they will be excluded from the list of the columns that RadFilter will offer to filter. The filter expressions generated by the RadFilter control will depend on the data type of the source grid fields, thus making them protected from type conflicts and syntax errors.

    Note that the filter expressions produced by the built-in filtering mechanism of RadGrid and those created by RadFilter are independent from each other. Hence each of these two filter generators will clear the previous filter patterns applied to RadGrid for ASP.NET AJAX.

    The demo also demonstrates how to hide the default Apply button of RadFilter and trigger command for building expressions from an external button handler. The controls are ajaxified via RadAjaxManager.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.FilterExamplesCSharp.Integration.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2" />
        <title></title>
        <style type="text/css">
            .filterDiv
            {
                margin: 20px 0px 10px 0px;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <div>
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS" ShowSkinChooser="true"
                OnSkinChanged="Header1_SkinChanged" />
            <!-- content start -->
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadFilter1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadFilter1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
            <div class="filterDiv">
                <telerik:RadFilter runat="server" ID="RadFilter1" FilterContainerID="RadGrid1" ShowApplyButton="false" />
            </div>
            <telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
                AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" OnItemCommand="RadGrid1_ItemCommand">
                <MasterTableView IsFilterItemExpanded="false" CommandItemDisplay="Top">
                    <CommandItemTemplate>
                        <telerik:RadToolBar runat="server" ID="RadToolBar1" OnButtonClick="RadToolBar1_ButtonClick">
                            <Items>
                                <telerik:RadToolBarButton Text="Apply filter" CommandName="FilterRadGrid" ImageUrl="<%#GetFilterIcon() %>"
                                    ImagePosition="Right" />
                            </Items>
                        </telerik:RadToolBar>
                    </CommandItemTemplate>
                    <Columns>
                        <telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" DataType="System.Int32" />
                        <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="OrderDate" DataFormatString="{0:MM/dd/yyyy}"/>
                        <telerik:GridNumericColumn DataField="ShipVia" HeaderText="ShipVia" DataType="System.Int32" />
                        <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" />
                        <telerik:GridBoundColumn DataField="ShipAddress" HeaderText="ShipAddress" />
                        <telerik:GridNumericColumn DataField="Freight" HeaderText="Freight" DataType="System.Decimal" />
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
            <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="Select OrderID, OrderDate, ShipVia, ShipName, ShipAddress, Freight FROM Orders" />
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </div>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451