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

WebForms Filter Overview

  • And
  • Or
  • Contains
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • OrderID
  • OrderDate
  • ShipVia
  • ShipName
  • ShipAddress
  • ShipCity
  • ShipCountry
Orders
OrderID: 10297
Order date: 9/4/1996
Ship city: Strasbourg
Ship country: France
Ship name: Blondel père et fils
OrderID: 10302
Order date: 9/10/1996
Ship city: Charleroi
Ship country: Belgium
Ship name: Suprêmes délices
OrderID: 10303
Order date: 9/11/1996
Ship city:
Ship country: Spain
Ship name: Godos Cocina Típica
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: 10308
Order date: 9/18/1996
Ship city: México D.F.
Ship country: Mexico
Ship name: Ana Trujillo Emparedados y helados
OrderID: 10309
Order date: 9/19/1996
Ship city: Cork
Ship country: Ireland
Ship name: Hungry Owl All-Night Grocers
OrderID: 10310
Order date: 9/20/1996
Ship city: Portland
Ship country: USA
Ship name: The Big Cheese
October 2024
October 2024
 SMTWTFS
40293012345
416789101112
4213141516171819
4320212223242526
44272829303112
453456789
  • Demo Configurator
  • Operation Mode
  • Expression Preview Position

Show Line Images
Allow Filter On Blur

This example demonstates the RadFilter functionalities and a example with RadListView integration. You could configure the main filter options from the Configurator section. Choosing OperationMode (for enabling client-side creation of the RadFilter), showing\hiding the line images, selecting the expression preview position or enabling the filter to perform filtering on a blur of a input control. To apply the filter expressions on the RadListView click the "Apply" button which will evaluate the RadFilter expression and pass it to the RadListView control.

About RadFilter for ASP.NET AJAX

Build complex filter expressions in a breeze with RadFilter for ASP.NET AJAX. The control allows to specify expressions based on the data type of the source fields and attach them to data-bound controls like RadGrid and RadListView for ASP.NET AJAX. The visual intuitive UI of RadFilter is especially designed to facilitate the end-user and at the same time is powerful enough to create related expressions with a few clicks. Data input filters ensure that the entered filter pattern will be valid and processed accurately.

RadFilter and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Visual Expression Building - Data filtering has never been user-friendlier. With RadFilter, you point-and-click to select your filter options and you are good to go.
  • Seamless Integration - RadFilter integrates tightly with all .NET 4.0/4.5 data source controls, the RadListView and the RadGrid to enable visual filtering at no programming cost.
  • Filter Any Databound Control - Filter-enable any databound control with a straightforward connection mechanism.
Read details on the Filter product page
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.FilterExamplesCSharp.Overview.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:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <asp:Panel ID="Panel1" runat="server" CssClass="demo-container">
        <div style="margin-bottom: 10px">
            <telerik:RadFilter RenderMode="Lightweight" runat="server" ID="RadFilter2" FilterContainerID="RadListView1"
                ExpressionPreviewPosition="Bottom">
            </telerik:RadFilter>
        </div>
        <div>
            <telerik:RadListView ID="RadListView1" 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.png" 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>
    </asp:Panel>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="Select OrderID, OrderDate, ShipVia, ShipName, ShipAddress, ShipCity, ShipCountry FROM Orders"></asp:SqlDataSource>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Operation Mode</span>
                            <qsf:RadioButtonList ID="OperationMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="OperationMode_SelectedIndexChanged">
                                <asp:ListItem Text="ServerAndClient" Value="ServerAndClient" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Server" Value="Server"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Expression Preview Position</span>
                            <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>
                        </li>
                        <li></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <span class="label">Show Line Images</span>
                    <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="Narrow">
                    <span class="label">Allow Filter On Blur</span>
                    <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