Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Filter / First Look

Configurator

Enable/Disable RadFilter lines
Select expression preview item position:
Enable/Disable RadFilter postback on blur functionality
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

  • 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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.FilterExamplesCSharp.FirstLook.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
        <telerik:HeadTag runat="server" ID="Headtag2" />
        <title></title>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <div>
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS" ShowSkinChooser="true"
                OnSkinChanged="Header1_SkinChanged" />
            <!-- content start -->
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
                    Expanded="true">
                    <table>
                        <tr>
                            <td valign="top" style="width: 250px">
                                <br />
                                Enable/Disable RadFilter lines<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 />
                                Select expression preview item position:<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 />
                                Enable/Disable RadFilter postback on blur functionality<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"
                        ExpressionPreviewPosition="Bottom" />
                </div>
                <div>
                    <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" Width="100%"
                        PageSize="6" AllowPaging="True" runat="server" ItemPlaceholderID="ProductsHolder"
                        DataKeyNames="OrderID">
                        <AlternatingItemTemplate>
                            <div class="rlvA" style="height: 120px; width: 270px; 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") %>' />
                                                <br />
                                                <strong>Order date:</strong>
                                                <asp:Label ID="OrderDateLabel" runat="server" Text='<%#((DateTime)Eval("OrderDate")).ToShortDateString()%>' />
                                                <br />
                                                <strong>Ship city:</strong>
                                                <asp:Label ID="ShipCityLabel" runat="server" Text='<%#Eval("ShipCity") %>' />
                                                <br />
                                                <strong>Ship country:</strong>
                                                <asp:Label ID="ShipCountryLabel" runat="server" Text='<%# Eval("ShipCountry") %>' />
                                                <br />
                                                <strong>Ship name:</strong>
                                                <asp:Label ID="ShipNameLabel" runat="server" Text='<%#Eval("ShipName") %>' />
                                                <br />
                                            </td>
                                            <td>
                                                <img src="Img/ordertracking.gif" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                </fieldset>
                            </div>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                            <div class="rlvA" style="height: 120px; width: 270px; 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") %>' />
                                                <br />
                                                <strong>Order date:</strong>
                                                <asp:Label ID="OrderDateLabel" runat="server" Text='<%# ((DateTime)Eval("OrderDate")).ToShortDateString() %>' />
                                                <br />
                                                <strong>Ship city:</strong>
                                                <asp:Label ID="ShipCityLabel" runat="server" Text='<%#Eval("ShipCity") %>' />
                                                <br />
                                                <strong>Ship country:</strong>
                                                <asp:Label ID="ShipCountryLabel" runat="server" Text='<%# Eval("ShipCountry") %>' />
                                                <br />
                                                <strong>Ship name:</strong>
                                                <asp:Label ID="ShipNameLabel" runat="server" Text='<%#Eval("ShipName") %>' />
                                                <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 %>" />
                                    </div>
                                    <div style="display: none">
                                        <telerik:RadTimeView ID="rlvSharedTimeView" runat="server" Skin="<%# Container.Skin %>" />
                                    </div>
                                    <div>
                                        <telerik:RadDataPager ID="RadDataPager1" PageSize="6" runat="server">
                                            <Fields>
                                                <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                            </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>
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </div>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451