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

Grid / Basic Filtering

Show filtering item

OrderIDShipNameOrderDateShippedDateShipCountryShipPostalCodeFreight
      Sum : 64942.69
12345678910...
Page size:
select
 830 items in 56 pages
10248Vins et alcools Chevalier7/4/1996Tuesday, July 16, 1996France5110032.38
10249Toms Spezialitäten7/5/1996Wednesday, July 10, 1996Germany4408711.61
10250Hanari Carnes7/8/1996Friday, July 12, 1996Brazil05454-87665.83
10251Victuailles en stock7/8/1996Monday, July 15, 1996France6900441.34
10252Suprêmes délices7/9/1996Thursday, July 11, 1996BelgiumB-600051.30
10253Hanari Carnes7/10/1996Tuesday, July 16, 1996Brazil05454-87658.17
10254Chop-suey Chinese7/11/1996Tuesday, July 23, 1996Switzerland301222.98
10255Richter Supermarkt7/12/1996Monday, July 15, 1996Switzerland1204148.33
10256Wellington Importadora7/15/1996Wednesday, July 17, 1996Brazil08737-36313.97
10257HILARION-Abastos7/16/1996Monday, July 22, 1996Venezuela502281.91
10258Ernst Handel7/17/1996Tuesday, July 23, 1996Austria8010140.51
10259Centro comercial Moctezuma7/18/1996Thursday, July 25, 1996Mexico050223.25
10260Ottilies Käseladen7/19/1996Monday, July 29, 1996Germany5073955.09
10261Que Delícia7/19/1996Tuesday, July 30, 1996Brazil02389-6733.05
10262Rattlesnake Canyon Grocery7/22/1996Thursday, July 25, 1996USA8711048.29

Click "PostBack" to see the state of the grid is preserved.

  • The example demonstrates the filtering capabilities of Telerik RadGrid. Filtering can be enabled/disabled using RadGrid.AllowFilteringByColumn or GridTableView.AllowFilteringByColumn properties. Then each column that supports filtering (GridBoundColumn, GridCheckBoxColumn, etc) shows a filter box beneath the corresponding header.
    User can set a filter expression based on the rules specified in the corresponding column properties: FilterFormatString, CurrentFilterFunction, CurrentFilterValue . After pressing the filter button (next to the filter box) the grid displays only the records matching the filter criteria (regarding the settings of all filter boxes).
    Additionally, if you set AutoPostBackOnFilter property of the corresponding column to true you can trigger postback filter operation for Contains (for string types) and EqualTo (for numeric types) when you type in the filter box and press [Enter] from the keyboard. Moreover, you can execute other type of filter action by setting the CurrentFilterFunction property of the corresponding column to an internally recognized value, for example:

    < telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" UniqueName="ProductName" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true" >

    Another option is to set FilterDelay property for grid column that can be filtered. Thus filtering operations will be executed after the delay specified through that property elapses. For example:

    < telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID" UniqueName="OrderID" FilterControlWidth="40px" AutoPostBackOnFilter="false" CurrentFilterFunction="EqualTo" FilterDelay="4000" ShowFilterIcon="false" >

    The filtering menu of Telerik RadGrid is presented by single object server-side. This way of implementation has been chosen to speed up the grid performance by merely creating one menu instance server side and cloning the instance for different columns. The filtering menu is independent for each column in RadGrid - this means that the filtering menu options vary by the DataType of the corresponding column. Hence integer column will have one set of filter menu options (EqualTo, NotEqualTo, GreaterThan, LessThan, etc.), string column will have additional options (Contains, StartsWith. etc.) and so on.

    Note that the built-in filtering feature is not supported with simple data-binding (calling DataBind()). See the Simple data binding demo from the Populating with data section for more info about the limitations of this binding mode.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesCSharp.GeneralFeatures.Filtering.DefaultVB" %>

    <%@ Register TagPrefix="telerik" 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"></telerik:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
            <!-- content start -->
           <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
            <telerik:RadCodeBlock runat="server" ID="radCodeBlock">

                <script type="text/javascript">
                    function showFilterItem(){
                        $find('<%=RadGrid1.ClientID %>').get_masterTableView().showFilterItem();
                    }
                    function hideFilterItem(){
                        $find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();
                    }
                </script>

            </telerik:RadCodeBlock>
            <div>
                Show filtering item
                <input id="Radio1" type="radio" runat="server" name="showHideGroup" checked="true"
                    onclick="showFilterItem()" /><label for="Radio1">Yes</label>
                <input id="Radio2" type="radio" runat="server" name="showHideGroup" onclick="hideFilterItem()" /><label
                    for="Radio2">No</label>
            </div>
            <br />
            <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" DataSourceID="SqlDataSource1"
                Width="760px" AllowFilteringByColumn="True" AllowSorting="True" PageSize="15"
                ShowFooter="True" AllowPaging="True" runat="server" GridLines="None"
                EnableLinqExpressions="false">
                <PagerStyle Mode="NextPrevAndNumeric" />
                 <GroupingSettings CaseSensitive="false" />
                <MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowFilteringByColumn="True"
                    ShowFooter="True" TableLayout="Auto">
                    <Columns>
                        <telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID"
                            UniqueName="OrderID" FilterControlWidth="40px" AutoPostBackOnFilter="false" CurrentFilterFunction="equalto" FilterDelay="4000"
                            ShowFilterIcon="false">
                        </telerik:GridNumericColumn>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="ShipName" HeaderText="ShipName"
                            SortExpression="ShipName" UniqueName="ShipName" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                            ShowFilterIcon="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridDateTimeColumn FilterControlWidth="50px" DataField="OrderDate" HeaderText="OrderDate"
                            SortExpression="OrderDate" UniqueName="OrderDate" PickerType="None" DataFormatString="{0:d}">
                        </telerik:GridDateTimeColumn>
                        <telerik:GridDateTimeColumn FilterControlWidth="120px" DataField="ShippedDate" HeaderText="ShippedDate"
                            SortExpression="ShippedDate" UniqueName="ShippedDate" PickerType="DatePicker"
                            DataFormatString="{0:D}">
                            <HeaderStyle Width="160px" />
                        </telerik:GridDateTimeColumn>
                        <telerik:GridBoundColumn FilterControlWidth="50px" DataField="ShipCountry" HeaderText="ShipCountry"
                            SortExpression="ShipCountry" UniqueName="ShipCountry">
                        </telerik:GridBoundColumn>
                        <telerik:GridMaskedColumn FilterControlWidth="50px" DataField="ShipPostalCode" HeaderText="ShipPostalCode"
                            SortExpression="ShipPostalCode" UniqueName="ShipPostalCode" Mask="#####">
                            <FooterStyle Font-Bold="true" />
                        </telerik:GridMaskedColumn>
                        <telerik:GridNumericColumn HeaderStyle-Width="90px" FilterControlWidth="50px" DataField="Freight" DataType="System.Decimal"
                            HeaderText="Freight" SortExpression="Freight" UniqueName="Freight" Aggregate="Sum">
                            <FooterStyle Font-Bold="true" />
                        </telerik:GridNumericColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Scrolling AllowScroll="false" />
                </ClientSettings>
            </telerik:RadGrid>
            <br />
            <asp:Button Text="PostBack" runat="server" ID="Button1" CssClass="button" Style="margin: 0 20px 0;" />
            Click "PostBack" to see the state of the grid is preserved.
            <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders" runat="server">
            </asp:SqlDataSource>
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </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