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: 10333
Order date: 10/18/1996
Ship city: Oulu
Ship country: Finland
Ship name: Wartian Herkku
OrderID: 10338
Order date: 10/25/1996
Ship city:
Ship country: USA
Ship name: Old World Delicatessen222
OrderID: 10339
Order date: 10/28/1996
Ship city: Montréal
Ship country: Canada
Ship name: Mère Paillarde
OrderID: 10340
Order date: 10/29/1996
Ship city: Marseille
Ship country: France
Ship name: Bon app'
OrderID: 10341
Order date: 10/29/1996
Ship city:
Ship country: Denmark
Ship name: Simons bistro
OrderID: 10343
Order date: 10/31/1996
Ship city: Frankfurt a.M.
Ship country: Germany
Ship name: Lehmanns Marktstand
OrderID: 10344
Order date: 11/1/1996
Ship city: Seattle
Ship country: USA
Ship name: White Clover Markets
OrderID: 10346
Order date: 11/5/1996
Ship city: Albuquerque
Ship country: USA
Ship name: Rattlesnake Canyon Grocery
April 2026
April 2026
 SMTWTFS
142930311234
15567891011
1612131415161718
1719202122232425
18262728293012
193456789
  • 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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ListView.Examples.FilteringWithRadFilter.DefaultVB" %>

<%@ 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='<%#DirectCast(Eval("OrderDate"),DateTime).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