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

Filtering with RadFilter

  • And
  • Or
  • Contains
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • OrderID
  • OrderDate
  • ShipVia
  • ShipName
  • ShipAddress
  • ShipCity
  • ShipCountry
Orders
OrderID: 10248
Order date: 7/4/1996
Ship city: Reims
Ship country: France
Ship name: Vins et alcools Chevalier
OrderID: 10249
Order date: 7/5/1996
Ship city: Münster
Ship country: Germany
Ship name: Toms Spezialitäten
OrderID: 10250
Order date: 7/8/1996
Ship city: Rio de Janeiro
Ship country: Brazil
Ship name: Hanari Carnes
OrderID: 10251
Order date: 7/8/1996
Ship city: Lyon
Ship country: France
Ship name: Victuailles en stock
OrderID: 10252
Order date: 7/9/1996
Ship city: Charleroi
Ship country: Belgium
Ship name: Suprêmes délices
OrderID: 10253
Order date: 7/10/1996
Ship city: Rio de Janeiro
Ship country: Brazil
Ship name: Hanari Carnes
OrderID: 10254
Order date: 7/11/1996
Ship city: Bern
Ship country: Switzerland
Ship name: Chop-suey Chinese
OrderID: 10255
Order date: 7/12/1996
Ship city: Genève
Ship country: Switzerland
Ship name: Richter Supermarkt
May 2025
May 2025
 SMTWTFS
1827282930123
1945678910
2011121314151617
2118192021222324
2225262728293031
231234567
  • Demo Configurator
Show Line Images
Expression Preview Position
Allow Filter On Blur

RadFilter can be used to build complex filtering criteria by means of intuitive visual UI and depending on the data type of the underlying source fields. This example demonstrates the integration between RadFilter and RadListView for ASP.NET AJAX.

To apply the filter expressions when you build it in par with your preferences, click the "Apply" button. This will trigger the ApplyExpressions server event of RadFilter which can be intercepted explicitly or handled implicitly by setting FilterContainerID (as shown on the demo). RadFilter will build RadFilterExpression hierarchy and pass it to RadListView to perform filtering.

Operations that can be performed via RadFilter's user interface:

  • Add/Remove expressions - Expression can be single or grouped expression/condition. Deleting a group removes all child expressions, except for root group which cannot be deleted.
  • Change group operator - Group operators are supplied by the filterable container (RadListView in this case). By clicking on group operator a list with supported operators will be shown.
  • Change filter function - Filter functions are supplied by the filterable container in the same manner as group operators.
  • Change field name - When bound, the filterable container (RadListView) supplies a list of all fields that can be used to perform filtering. RadFilter allows the end user to build filter expression depending on the field name and its data type.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ListView.Examples.FilteringWithRadFilter.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <div class="demo-container">
            <div class="filterWrapper">
                <telerik:RadFilter RenderMode="Lightweight" runat="server" ID="RadFilter2" FilterContainerID="RadListView1" ExpressionPreviewPosition="Bottom">
                </telerik:RadFilter>
            </div>
          <telerik:RadListView ID="RadListView1" RenderMode="Lightweight" DataSourceID="SqlDataSource1" Width="100%"
                PageSize="8" AllowPaging="True" runat="server" ItemPlaceholderID="ProductsHolder"
                DataKeyNames="OrderID">
                <ItemTemplate>
                    <div class="rlvA">
                        <fieldset>
                            <table>
                                <tr>
                                    <td>
                                        <strong>OrderID:</strong>
                                        <asp:Label ID="OrderIDLabel" runat="server" Text='<%#Eval("OrderID") %>'></asp:Label>
                                        <br />
                                        <strong>Order date:</strong>
                                        <asp:Label ID="OrderDateLabel" runat="server" Text='<%# ((DateTime)Eval("OrderDate")).ToShortDateString() %>'></asp:Label>
                                        <br />
                                        <strong>Ship city:</strong>
                                        <asp:Label ID="ShipCityLabel" runat="server" Text='<%#Eval("ShipCity") %>'></asp:Label>
                                        <br />
                                        <strong>Ship country:</strong>
                                        <asp:Label ID="ShipCountryLabel" runat="server" Text='<%# Eval("ShipCountry") %>'></asp:Label>
                                        <br />
                                        <strong>Ship name:</strong>
                                        <asp:Label ID="ShipNameLabel" runat="server" Text='<%#Eval("ShipName") %>'></asp:Label>
                                        <br />
                                    </td>
                                    <td>
                                        <img src="images/ordertracking.gif" alt="" />
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </div>
                </ItemTemplate>
                <LayoutTemplate>
                    <fieldset style="padding: 10px;">
                        <legend style="margin-left: 20px">Orders</legend>
                        <div class="RadListView RadListViewFloated RadListView_Default">
                            <div class="rlvFloated">
                                <div id="ProductsHolder" runat="server">
                                </div>
                            </div>
                            <div style="display: none">
                                <telerik:RadCalendar RenderMode="Lightweight" ID="rlvSharedCalendar" runat="server" RangeMinDate="<%#new DateTime(1900, 1, 1) %>"
                                    Skin="<%#Container.Skin %>">
                                </telerik:RadCalendar>
                            </div>
                            <div style="display: none">
                                <telerik:RadTimeView ID="rlvSharedTimeView" runat="server" Skin="<%# Container.Skin %>">
                                </telerik:RadTimeView>
                            </div>
                            <div>
                                <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" PageSize="8" runat="server">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </div>
                        </div>
                    </fieldset>
                </LayoutTemplate>
            </telerik:RadListView>
        </div>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="Select OrderID, OrderDate, ShipVia, ShipName, ShipAddress, ShipCity, ShipCountry FROM Orders"></asp:SqlDataSource>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Show Line Images">
                    <qsf:RadioButtonList runat="server" ID="FilterLines" AutoPostBack="true" OnSelectedIndexChanged="FilterLines_SelectedIndexChanged">
                        <asp:ListItem Text="Enabled" Value="true" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Disabled" Value="false"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Expression Preview Position">
                    <qsf:RadioButtonList runat="server" ID="ExpressionPreview" AutoPostBack="true" OnSelectedIndexChanged="ExpressionPreview_SelectedIndexChanged">
                        <asp:ListItem Text="None" Value="None"></asp:ListItem>
                        <asp:ListItem Text="Top" Value="Top"></asp:ListItem>
                        <asp:ListItem Text="Bottom" Value="Bottom" Selected="True"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Allow Filter On Blur">
                    <qsf:RadioButtonList runat="server" ID="AutoPostbackOnBlur" AutoPostBack="true" OnSelectedIndexChanged="AutoPostbackOnBlur_SelectedIndexChanged">
                        <asp:ListItem Text="Enabled" Value="true"></asp:ListItem>
                        <asp:ListItem Text="Disabled" Value="false" Selected="True"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance