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

Basic Filtering

Filtering with Server-Side Binding

OrderIDShipNameOrderDateShippedDateShipCountryShipPostalCodeFreight
From:
To:
      61988.16 kg
Page size:
 781 items in 79 pages
10295Vins et alcools Chevalier09/02/19969/10/1996 12:00:00 AM France 511001.15 kg
10297Blondel père et fils09/04/19969/10/1996 12:00:00 AM France 670005.74 kg
10298Hungry Owl All-Night Grocers09/05/19969/11/1996 12:00:00 AM Ireland  168.22 kg
10302Suprêmes délices09/10/199610/9/1996 12:00:00 AM Belgium B-60006.27 kg
10303Godos Cocina Típica09/11/19969/18/1996 12:00:00 AM Spain 41101107.83 kg
10305Old World Delicatessen09/13/199610/9/1996 12:00:00 AM USA 99508257.62 kg
10307Lonesome Pine Restaurant09/17/19969/25/1996 12:00:00 AM USA 972190.56 kg
10308Ana Trujillo Emparedados y helados09/18/19969/24/1996 12:00:00 AM Mexico 050211.61 kg
10309Hungry Owl All-Night Grocers09/19/199610/23/1996 12:00:00 AM Ireland  47.30 kg
10310The Big Cheese09/20/19969/27/1996 12:00:00 AM USA 9720117.52 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.
  • DefaultVB.aspx
<%@ Page Language="vb"  %>

<%@ 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 ID="RadAjaxPanel1" 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