ListView - Basic filtering



Products
Chai
Category: Beverages
Unit price: 18.00
Supplier: Exotic Liquids
Chang
Category: Beverages
Unit price: 19.00
Supplier: Exotic Liquids
Aniseed Syrup
Category: Condiments
Unit price: 10.00
Supplier: Exotic Liquids
Chef Anton's Cajun Seasoning
Category: Condiments
Unit price: 22.00
Supplier: New Orleans Cajun Delights
Chef Anton's Gumbo Mix
Category: Condiments
Unit price: 21.35
Supplier: New Orleans Cajun Delights
Grandma's Boysenberry Spread
Category: Condiments
Unit price: 25.00
Supplier: Grandma Kelly's Homestead
Page size:
Page:
of 13
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadListView for ASP.NET AJAX features integrated filtering capabilities. Filtering is achieved through the definition of filter expressions which should consequently be added to the FilterExpressions collection of the control.

Each filter function has a corresponding type that should be used for the construction of the filter expression. If, for example, a filter expression with a GreaterThan logical operator is to be defined, the RadListViewGreaterThanFilterExpression type is there to help you build the expression. The same goes for all the other filter operators (functions).

The filter expressions can be added to RadListView's FilterExpressions collection in several ways:

  • there is the conventional approach of creating instances of the new filter expressions and adding them to the FilterExpressions collection:
                    RadListView1.FilterExpressions.Add( new RadListViewGreaterThanFilterExpression<DateTime>("ShippedDate"){CurrentValue = DateTime.Parse("7/10/1996")}); 
                    RadListView1.FilterExpressions.Add( new RadListViewEqualToFilterExpression<int>("OrderID"){CurrentValue = 42} );
  • alternatively, the FilterExpressions collection exposes a so-called fluent expression builder object which, as it name supposes, can be used to build the expressions in a more stream-lined manner:
                    RadListView1.FilterExpressions.BuildExpression().GreaterThan("ShippedDate", DateTime.Parse("7/10/1996")).Or().EqualTo("OrderID", 42).Build();
    An improtant detail to note with this approach is the obligatory call to the Build() method.

  • the last and most consise way is provided by an overload of the FilterExpressions collection BuildExpression property takes in an Action delegate:
                    RadListView1.FilterExpressions.BuildExpression(expression => expression.GreaterThan("ShippedDate", DateTime.Parse("7/10/1996")).Or().EqualTo("OrderID", 42)));

One of RadListView's most powerful filtering features is the easy way to tie several filter expressions into one group and treat it as a single expression that can participate in further logcial operations. Again a dedicated type is provided out-of-the-box to help you in this regard - the RadListViewGroupFilterExpression. It can be used in all of the above ways to construct filter expressions and add them to the FilterExpressions collection of the RadListView control. The sample filter expressions above can be extended with the group feature as follows:

        RadListView1.FilterExpressions.BuildExpression(expression => expression.GreaterThan("ShippedDate", 
        DateTime.Parse("7/10/1996")).Or().EqualTo("OrderID", 42).And().Group(group => group.IsNotEmpty("ShipCountry") .And().Contains("ShipCountry", "G")));
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Paging.IntegratedPaging.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function pageLoad() {
                    window.$ = jQuery = $telerik.$;
                    numericBox = $find('<%= numericBoxValue.ClientID %>');
                    btnShowAll = $find("<%= btnShowAll.ClientID %>");
                    btnSearch = $find("<%= btnSearch.ClientID %>");
                }
            </script>
        </telerik:RadCodeBlock>
        <script type="text/javascript" src="scripts.js"></script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnSearch">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListView1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnShowAll">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListView1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div class="filterWrapper">
            <div class="filterDropDown">
                <telerik:RadComboBox RenderMode="Lightweight" Skin="Silk" AutoPostBack="false" OnClientSelectedIndexChanged="fieldComboSelectedIndexChanged"
                    ID="fieldCombo" AppendDataBoundItems="true" runat="server">
                    <Items>
                        <telerik:RadComboBoxItem Text="Choose Filter" Value="Choose Filter_" runat="server"></telerik:RadComboBoxItem>
                    </Items>
                </telerik:RadComboBox>
            </div>
            <div id="radioButtonDiv1" class="radioButtonDiv" runat="server">
                <asp:RadioButtonList RepeatColumns="3" ID="filterFunctionsList1" runat="server">
                    <asp:ListItem Text="EqualTo" Value="EqualTo"></asp:ListItem>
                    <asp:ListItem Text="NotEqualTo" Value="NotEqualTo"></asp:ListItem>
                    <asp:ListItem Text="GreaterThan" Value="GreaterThan"></asp:ListItem>
                    <asp:ListItem Text="LessThan" Value="LessThan"></asp:ListItem>
                    <asp:ListItem Text="GreaterThanOrEqualTo" Value="GreaterThanOrEqualTo"></asp:ListItem>
                    <asp:ListItem Text="LessThanOrEqualTo" Value="LessThanOrEqualTo"></asp:ListItem>
                </asp:RadioButtonList>
            </div>
            <div id="radioButtonDiv2" class="radioButtonDiv" runat="server">
                <asp:RadioButtonList RepeatColumns="1" ID="filterFunctionsList2" runat="server">
                    <asp:ListItem Text="Exact Match" Value="Exact Match"></asp:ListItem>
                    <asp:ListItem Text="Contains" Value="Contains"></asp:ListItem>
                </asp:RadioButtonList>
            </div>
            <div id="boxValueDiv" class="boxValueDiv" runat="server">
                <telerik:RadTextBox RenderMode="Lightweight" ID="boxValue" runat="server" CssClass="boxValue" onkeydown="FilterData(event)"></telerik:RadTextBox>
            </div>
            <div id="numericBoxValueDiv" class="boxValueDiv" runat="server">
                <telerik:RadNumericTextBox RenderMode="Lightweight" Skin="Silk" ID="numericBoxValue" NumberFormat-DecimalDigits="0" NumberFormat-GroupSeparator=""
                    runat="server" CssClass="boxValue" onkeydown="FilterData(event)">
                </telerik:RadNumericTextBox>
            </div>
            <div id="buttonsDiv" class="buttonsDiv" runat="server">
                <telerik:RadButton RenderMode="Lightweight" ID="btnSearch" runat="server" Text="Apply" OnClick="btnSearch_Click" OnClientClicked="btnSearchClick"></telerik:RadButton>
                <telerik:RadButton RenderMode="Lightweight" ID="btnShowAll" runat="server" Text="Cancel" OnClick="btnShowAll_Click"></telerik:RadButton>
            </div>
        </div>
        <telerik:RadListView ID="RadListView1" RenderMode="Lightweight" DataSourceID="SqlDataSource1" Width="100%" Skin="Silk"
            AllowPaging="true" runat="server" ItemPlaceholderID="ProductsHolder" OnDataBound="RadListView1_DataBound">
            <ItemTemplate>
                <div class="itemStyle">
                    <asp:Label ID="productIDLabel" runat="server" Text='<%# Eval("ProductID") %>' Visible="false"></asp:Label>
                    <asp:Label CssClass="labelLarge" ID="ContactNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                    <div class="labelSmall">
                        Category:
                            <asp:Label ID="categoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label><br />
                        Unit price:
                            <asp:Label ID="unitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label><br />
                        Supplier:
                            <asp:Label ID="companyNameLabel" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label><br />
                    </div>
                </div>
            </ItemTemplate>
            <LayoutTemplate>
                <fieldset id="FieldSet1">
                    <legend>Products</legend>
                    <asp:Panel ID="ProductsHolder" Width="300px" runat="server">
                    </asp:Panel>
                    <table cellpadding="0" cellspacing="0" width="100%" class="clearFix">
                        <tr>
                            <td>
                                <telerik:RadDataPager RenderMode="Lightweight" Skin="Silk" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                    PageSize="6">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                                        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                        <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                                        <telerik:RadDataPagerPageSizeField PageSizeText="Page size: "></telerik:RadDataPagerPageSizeField>
                                        <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                            TextBoxWidth="30"></telerik:RadDataPagerGoToPageField>

                                    </Fields>
                                </telerik:RadDataPager>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </LayoutTemplate>
        </telerik:RadListView>
        <asp:SqlDataSource ID="SqlDataSource1" SelectCommand="SELECT [ProductID], [ProductName], [CategoryName], [UnitPrice], [CompanyName] FROM [Products] JOIN [Categories] ON [Products].CategoryID = [Categories].CategoryID JOIN [Suppliers] ON [Suppliers].SupplierID = [Products].SupplierID"
            runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="Select CategoryID, CategoryName from Categories"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="Select SupplierID, CompanyName from Suppliers"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?