Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Basic Filtering

Filtering with Server-Side Binding

OrderIDShipNameOrderDateShippedDateShipCountryShipPostalCodeFreight
RadDatePicker
RadDatePicker
Open the calendar popup.
From:
RadDatePicker
RadDatePicker
Open the calendar popup.
 To:
RadDatePicker
RadDatePicker
Open the calendar popup.
      64942.69 kg
Data pager
Data pager
Page size:
PageSizeComboBox
select
 830 items in 83 pages
10248Vins et alcools Chevalier07/04/19967/16/1996 12:00:00 AM France 5110032.38 kg
10249Toms Spezialitäten07/05/19967/10/1996 12:00:00 AM Germany 4408711.61 kg
10250Hanari Carnes07/08/19967/12/1996 12:00:00 AM Brazil 05454-87665.83 kg
10251Victuailles en stock07/08/19967/15/1996 12:00:00 AM France 6900441.34 kg
10252Suprêmes délices07/09/19967/11/1996 12:00:00 AM Belgium B-600051.30 kg
10253Hanari Carnes07/10/19967/16/1996 12:00:00 AM Brazil 05454-87658.17 kg
10254Chop-suey Chinese07/11/19967/23/1996 12:00:00 AM Switzerland 301222.98 kg
10255Richter Supermarkt07/12/19967/15/1996 12:00:00 AM Switzerland 1204148.33 kg
10256Wellington Importadora07/15/19967/17/1996 12:00:00 AM Brazil 08737-36313.97 kg
10257HILARION-Abastos07/16/19967/22/1996 12:00:00 AM Venezuela 502281.91 kg

Filtering with Client-Side Binding

Company NameCityCountryContact TitleContact NamePhone
Data pager
Data pager
Page size:
PageSizeComboBox
select
 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.
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#"  %>

<%@ 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">
    <title>Basic Filtering capabilities of ASP.NET AJAX Grid</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <h2>Filtering with Server-Side Binding</h2>
    <telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" DataSourceID="SqlDataSource1"
            AllowFilteringByColumn="True" AllowSorting="True"
            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 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>

    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders" runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>