Filter

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadFilter - Telerik's ASP.NET Filter

Configurator












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
Calendar
Title and navigation
Title and navigation
<<<October, 2014><<
October, 2014
 SMTWTFS
402829301234
41567891011
4212131415161718
4319202122232425
442627282930311
452345678

tlrk.it/150XVHN To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/150XVHN

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 80+ 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.

About This Demo

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.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Filter demo, you can use the following path to find it in the sample website application:
filter/examples/overview

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.

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.FilterExamplesVB.Overview.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Src="~/Filter/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>AJAX Filter Demo | RadFilter for ASP.NET </title>
    <style type="text/css">
        div.RadListView
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
            Expanded="true">
            <table>
                <tr>
                    <td valign="top" style="width: 200px">
                        <br />
                        <label>Select OperationMode</label>
                        <asp: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>
                        </asp:RadioButtonList>
                    </td>
                    <td valign="top" style="width: 250px">
                        <br />
                        <label for="FilterLines">Enable/Disable RadFilter lines</label><br />
                        <asp: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>
                        </asp:RadioButtonList>
                    </td>
                    <td valign="top" style="width: 250px">
                        <br />
                        <label for="ExpressionPreview">Select expression preview item position:</label><br />
                        <asp: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>
                        </asp:RadioButtonList>
                    </td>
                    <td valign="top">
                        <br />
                        <label for="AutoPostbackOnBlur">Enable/Disable RadFilter postback on blur functionality</label><br />
                        <asp: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>
                        </asp:RadioButtonList>
                    </td>
                </tr>
            </table>
        </qsf:ConfiguratorPanel>
        <div style="margin-bottom: 10px">
            <telerik:RadFilter runat="server" ID="RadFilter2" FilterContainerID="RadListView1" OperationMode="ServerAndClient">
            </telerik:RadFilter>
        </div>
        <div>
            <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" Width="100%"
                PageSize="8" AllowPaging="True" runat="server" ItemPlaceholderID="ProductsHolder"
                DataKeyNames="OrderID">
                <AlternatingItemTemplate>
                    <div class="rlvA" style="height: 120px; width: 290px; margin-top: 5px; margin-left: 2px;
                        margin-bottom: 20px; padding-left: 10px; border-style: none">
                        <fieldset style="height: 100%">
                            <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="Img/ordertracking.gif" alt="" />
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </div>
                </AlternatingItemTemplate>
                <ItemTemplate>
                    <div class="rlvA" style="height: 120px; width: 290px; margin-top: 5px; margin-left: 2px;
                        margin-bottom: 20px; padding-left: 10px; border-style: none">
                        <fieldset style="height: 100%">
                            <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="Img/ordertracking.gif" alt="" />
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </div>
                </ItemTemplate>
                <LayoutTemplate>
                    <fieldset>
                        <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 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 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>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Filter.png" AlternateText="tlrk.it/150XVHN" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/150XVHN">tlrk.it/150XVHN</a>
    </div>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here