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

RadGrid filtering with RadFilter

  • And
  • Or
  • Not And
  • Not Or
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • OrderID
  • OrderDate
  • ShipVia
  • ShipName
  • ShipAddress
  • Freight
  • Apply filter
OrderIDOrderDateShipViaShipNameShipAddressFreight
12345678910...
Page size:
 799 items in 80 pages
1027908/13/19962Lehmanns MarktstandMagazinweg 725.83
1028008/14/19961Berglunds snabbköpBerguvsvägen 88.98
1028308/16/19963LILA-SupermercadoCarrera 52 con Ave. Bolívar #65-98 Llano Largo84.81
1028408/19/19961Lehmanns MarktstandMagazinweg 776.56
1028708/22/19963Ricardo AdocicadosAv. Copacabana, 26712.76
1028908/26/19963B's BeveragesFauntleroy Circus22.77
1029008/27/19961Comércio MineiroAv. dos Lusíadas, 2379.70
1029208/28/19962Tradiçao HipermercadosAv. Inês de Castro, 4141.35
1029308/29/19963Tortuga RestauranteAvda. Azteca 12321.18
1029408/30/19962Rattlesnake Canyon Grocery2817 Milton Dr.147.26
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.FilterExamplesCSharp.Integration.DefaultCS"  %>

<%@ 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>
  <style type="text/css">
    .filterDiv {
      margin: 0px 0px 20px 0px;
    }
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
  <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RadFilter1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadFilter1"></telerik:AjaxUpdatedControl>
        </UpdatedControls>
      </telerik:AjaxSetting>
      <telerik:AjaxSetting AjaxControlID="RadGrid1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
        </UpdatedControls>
      </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManager>
  <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
  <div class="demo-container">
    <div class="filterDiv">
      <telerik:RadFilter RenderMode="Lightweight" runat="server" ID="RadFilter1" FilterContainerID="RadGrid1" ShowApplyButton="false"></telerik:RadFilter>
    </div>
    <telerik:RadGrid RenderMode="Lightweight" 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 RenderMode="Lightweight" runat="server" ID="RadToolBar1" AutoPostBack="true">
            <Items>
              <telerik:RadToolBarButton Text="Apply filter" CommandName="FilterRadGrid" 
                  ImageUrl="<%#GetFilterIcon() %>" ImagePosition="Right"></telerik:RadToolBarButton>
            </Items>
          </telerik:RadToolBar>
        </CommandItemTemplate>
        <Columns>
          <telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" DataType="System.Int32"></telerik:GridNumericColumn>
          <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="OrderDate" DataFormatString="{0:MM/dd/yyyy}"></telerik:GridDateTimeColumn>
          <telerik:GridNumericColumn DataField="ShipVia" HeaderText="ShipVia" DataType="System.Int32"></telerik:GridNumericColumn>
          <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName"></telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="ShipAddress" HeaderText="ShipAddress"></telerik:GridBoundColumn>
          <telerik:GridNumericColumn DataField="Freight" HeaderText="Freight" DataType="System.Decimal"></telerik:GridNumericColumn>
        </Columns>
      </MasterTableView>
    </telerik:RadGrid>
  </div>
  <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="Select OrderID, OrderDate, ShipVia, ShipName, ShipAddress, Freight FROM Orders"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance