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: 10279
Order date: 8/13/1996
Ship city: Frankfurt a.M.
Ship country: Germany
Ship name: Lehmanns Marktstand
OrderID: 10283
Order date: 8/16/1996
Ship city: Barquisimeto
Ship country: Venezuela
Ship name: LILA-Supermercado
OrderID: 10289
Order date: 8/26/1996
Ship city: London
Ship country: UK
Ship name: B's Beverages
OrderID: 10294
Order date: 8/30/1996
Ship city: Albuquerque
Ship country: USA
Ship name: Rattlesnake Canyon Grocery
OrderID: 10295
Order date: 9/2/1996
Ship city: Reims
Ship country: France
Ship name: Vins et alcools Chevalier
OrderID: 10297
Order date: 9/4/1996
Ship city: Strasbourg
Ship country: France
Ship name: Blondel père et fils
OrderID: 10298
Order date: 9/5/1996
Ship city: Cork
Ship country: Ireland
Ship name: Hungry Owl All-Night Grocers
OrderID: 10299
Order date: 9/6/1996
Ship city: Rio de Janeiro
Ship country: Brazil
Ship name: Ricardo Adocicados
June 2024
  • 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