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: 10305
Order date: 9/13/1996
Ship city: Anchorage
Ship country: USA
Ship name: Old World Delicatessen
OrderID: 10307
Order date: 9/17/1996
Ship city: Portland
Ship country: USA
Ship name: Lonesome Pine Restaurant
OrderID: 10314
Order date: 9/25/1996
Ship city:
Ship country: italy
Ship name: Rattlesnake Canyon Grocery
OrderID: 10315
Order date: 9/26/1996
Ship city: Cowes
Ship country: UK
Ship name: Island Trading
OrderID: 10317
Order date: 9/30/1996
Ship city: Portland
Ship country: USA
Ship name: Lonesome Pine Restaurant
OrderID: 10319
Order date: 10/2/1996
Ship city: México D.F.
Ship country: Mexico
Ship name: Tortuga Restaurante
OrderID: 10321
Order date: 10/3/1996
Ship city: Cowes
Ship country: UK
Ship name: Island Trading
OrderID: 10323
Order date: 10/7/1996
Ship city: Brandenburg
Ship country: Germany
Ship name: Königlich Essen
December 2024
December 2024
 SMTWTFS
4824252627282930
491234567
50891011121314
5115161718192021
5222232425262728
532930311234
  • 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