New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Basic Filtering

Filtering with Server-Side Binding

OrderIDShipNameOrderDateShippedDateShipCountryShipPostalCodeFreight
From:
To:
      60879.21 kg
Page size:
 762 items in 77 pages
10307Lonesome Pine Restaurant09/17/19969/25/1996 12:00:00 AM USA 972190.56 kg
10314Rattlesnake Canyon Grocery09/25/199610/4/1996 12:00:00 AM italy 8711074.16 kg
10315Island Trading09/26/199610/3/1996 12:00:00 AM UK PO31 7PJ41.76 kg
10317Lonesome Pine Restaurant09/30/199610/10/1996 12:00:00 AM USA 9721912.69 kg
10319Tortuga Restaurante10/02/199610/11/1996 12:00:00 AM Mexico 0503364.50 kg
10321Island Trading10/03/199610/11/1996 12:00:00 AM UK PO31 7PJ3.43 kg
10323Königlich Essen10/07/199610/14/1996 12:00:00 AM Germany 147764.88 kg
10324Save-a-lot Markets10/08/199610/10/1996 12:00:00 AM USA 83720214.27 kg
10325Königlich Essen10/09/199610/14/1996 12:00:00 AM Germany 1477664.86 kg
10326Bólido Comidas preparadas10/10/199610/14/1996 12:00:00 AM Spain 2802377.92 kg
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom

Filtering with Client-Side Binding

Company NameCityCountryContact TitleContact NamePhone
Page size:
 11 items in 2 pages
      
      
      
      
      
      
      
      
      
      
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.

GridDateTimeColumn supports range and time independent filtering functionality which are controlled with the EnableRangeFiltering and EnableTimeIndependentFiltering bool properties.
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" 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:GridMaskedColumn DataField="OrderID" HeaderText="OrderID" FilterControlWidth="50px" AutoPostBackOnFilter="false" CurrentFilterFunction="EqualTo" FilterDelay="2000" 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.

FilterType Property of RadGrid, determines what will be type of the filtering. The grid supports two types of filtering. In one of them the user can write a filter value and choose filter function(Contains, EqualTo, LessThan, etc.) that to be used. The second type of filtering is the CheckList Filtering. Using this filtering type, the grids shows a checkbox list with predefined values. After the user selects some values and apply the filtering, the grid will show only records that match any of the selected in the list values.The second Grid in the demo presents this CheckList Filtering

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.
  • DefaultCS.aspx
  • NorthwindCustomersWcfService.cs
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
        <h2>Filtering with Server-Side Binding</h2>
        <telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadGrid RenderMode="Lightweight" AutoGenerateColumns="false" ID="RadGrid1" DataSourceID="SqlDataSource1"
                AllowFilteringByColumn="True" AllowSorting="True" Width="100%"
                ShowFooter="True" AllowPaging="True" runat="server">
                <GroupingSettings CaseSensitive="false"></GroupingSettings>
                <MasterTableView AutoGenerateColumns="false" AllowFilteringByColumn="True" ShowFooter="True">
                    <Columns>
                        <telerik:GridMaskedColumn DataField="OrderID" HeaderText="OrderID"
                            FilterControlWidth="50px" AutoPostBackOnFilter="false" CurrentFilterFunction="EqualTo"
                            FilterDelay="2000" ShowFilterIcon="false" Mask="#####">
                        </telerik:GridMaskedColumn>
                        <telerik:GridBoundColumn FilterControlWidth="120px" DataField="ShipName" HeaderText="ShipName"
                            AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                            ShowFilterIcon="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="OrderDate" FilterControlWidth="110px"
                            SortExpression="OrderDate" PickerType="DatePicker" EnableTimeIndependentFiltering="true"
                            DataFormatString="{0:MM/dd/yyyy}">
                        </telerik:GridDateTimeColumn>
                        <telerik:GridDateTimeColumn FilterControlWidth="95px" DataField="ShippedDate" HeaderText="ShippedDate"
                            PickerType="DatePicker" EnableRangeFiltering="true">
                            <HeaderStyle Width="160px"></HeaderStyle>
                        </telerik:GridDateTimeColumn>
                        <telerik:GridTemplateColumn FilterControlWidth="80px" DataField="ShipCountry" HeaderText="ShipCountry">
                            <ItemTemplate>
                                <img src='Img/<%# Eval("ShipCountry") %>.gif' alt="" style="vertical-align: middle; margin-right: 7px;" /><%# Eval("ShipCountry") %>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn FilterControlWidth="50px" DataField="ShipPostalCode" HeaderText="ShipPostalCode">
                            <FooterStyle Font-Bold="true"></FooterStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridNumericColumn HeaderStyle-Width="130px" FilterControlWidth="50px" DataField="Freight"
                            DataType="System.Decimal" HeaderText="Freight" Aggregate="Sum" DataFormatString="{0} kg">
                            <FooterStyle Font-Bold="true"></FooterStyle>
                        </telerik:GridNumericColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        <br />
        <h2>Filtering with Client-Side Binding</h2>
        <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid2" AllowFilteringByColumn="true" FilterType="CheckList" AllowPaging="true" PagerStyle-AlwaysVisible="true" AllowSorting="true">
            <MasterTableView AutoGenerateColumns="False" CheckListWebServicePath="NorthwindCustomersWcfService.svc" DataKeyNames="CustomerID" ClientDataKeyNames="CustomerID">
                <Columns>
                    <telerik:GridBoundColumn FilterDelay="200" ShowFilterIcon="false" DataField="CompanyName" HeaderText="Company Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterDelay="200" FilterCheckListWebServiceMethod="LoadCities" DataField="City" HeaderText="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn FilterDelay="200" FilterCheckListWebServiceMethod="LoadCountries" DataField="Country" HeaderText="Country">
                        <ClientItemTemplate>
                        <img src='Img/#= Country #.gif' alt="" style="vertical-align: middle; margin-right: 7px;" />#= Country #
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn FilterDelay="200" FilterCheckListWebServiceMethod="LoadContactTitles" DataField="ContactTitle" HeaderText="Contact Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterDelay="200" ShowFilterIcon="false" DataField="ContactName" HeaderText="Contact Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterDelay="200" ShowFilterIcon="false" FilterCheckListWebServiceMethod="LoadPhones" DataField="Phone" HeaderText="Phone">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <DataBinding Location="NorthwindCustomersWcfService.svc" SelectMethod="GetDataAndCount" SortParameterType="Linq" FilterParameterType="Linq">
                </DataBinding>
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders" runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance