Binding RadListView with Telerik ClientDataSource


Page 1 of 10

filter

By Price:

By units in Stock:

Sorting

  • Units In Stock
  • Name
  • Unit Price
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo illustrates how you can bind RadListView to RadClientDataSource

It demonstrates how to use the client-side API of the TreeList to achieve multiple column sorting, range filtering, and paging with using the client side API of RadListView .

Filtering

The between filter expression is not built-in for the RadTreeList, but can be implemented by applying two filter expressions on the same field. This approach is supported by both RadListView and RadClientDataSource. Here is an example how to add "between" filter for "ProductID" field:

        
         listView1.get_filterExpressions().add("ProductID", "GreaterThan", 5);        
         listView1.get_filterExpressions().add("ProductID", "LessThan", 10);         

    

In this demo we use two RadSlider controls with enabled range selection to select minimum and maximum values for the "UnitPrice" and "UnitsInStock" fields.

Sorting

Multiple field sorting is also supported by both controls. To enable it you have to set AllowMultiFieldSorting="true" in the declaration of your RadListView. In this demo the sort expressions used for the ListView are created based on the values (and their order) shown in a ListBox. It has enabled drag drop and reorder functionality to allow reordering its items. Item order in the ListBox will determine the fields sort expressions order of the ListView. Each of the items of the ListBox has two states corresponding to ascending and descending order.

If you want to sort "Units In Stock" and "Unit Price", drag the "Units In Stock" item at the top of the ListBox and then drag the "Unit Price" at the second place. If you want to change the sort order of given field, click on the sorting icon in the given item of the ListBox. Here is example code that can be used for adding sorting on two fields. Records that have equal values by the first field, will be sorted by the second field in particular order.

         
        listView1.get_sortExpressions().add("UnitPrice", "Asc");         
        listView1.get_sortExpressions().add("ProductName", "Desc");     
    

Paging

To enable the paging the AllowPaging property of the RadTreeList should be set to "true". To navigate to given page it is enough to call:

        
         listView1.page(pageIndex);     
    
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="DefaultCS.aspx.cs"
    Inherits="Telerik.ListViewExamplesCSharp.Client.ClientDataSourceBinding.DefaultCS" %>

<%@ 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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        function pageLoad() {
            demo.initialize(
                "<%= RadListView1.ClientID%>",
                "<%= pageSlider.ClientID%>",
                "<%= priceSlider.ClientID%>",
                "<%= stockSlider.ClientID%>",
                "<%= RadListBox1.ClientID%>",
                "<%= PagerLabel.ClientID%>");
        }
    </script>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="H4H5H6" />
    <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
        <DataSource>
            <WebServiceDataSourceSettings ServiceType="OData">
                <Select Url="http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" DataType="JSONP" />
            </WebServiceDataSourceSettings>
        </DataSource>
        <Schema>
            <Model>
                <telerik:ClientDataSourceModelField FieldName="ProductName" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="QuantityPerUnit" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="UnitPrice" DataType="Number" />
                <telerik:ClientDataSourceModelField FieldName="UnitsInStock" DataType="Number" />
            </Model>
        </Schema>
    </telerik:RadClientDataSource>
     <div class="demo-containers ">
    <div class="demo-container no-bg">
        <div class="demoWrapper">
            
            <div class="data">
                <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" ClientDataSourceID="RadClientDataSource1" AllowMultiFieldSorting="true"
                    AllowPaging="true" PageSize="6">
                    <LayoutTemplate>
                        <div class="RadListView RadListView_Default">
                            <ul id="itemPlaceholder" runat="server">
                                <li></li>
                            </ul>
                        </div>
                    </LayoutTemplate>
                    <ClientSettings>
                        <DataBinding>
                            <ItemTemplate>
                          <li class="productItem">
                              <img width="110" height="110" src="../../../../Img/Northwind/Products/#= ProductID #.jpg" alt="#= ProductName #" />
                                <div class="productInfo">
                                    <h4>#= ProductName #</h4>
                                    <div class="left">
                                        <span class="quantityPerUnit">#= QuantityPerUnit #</span>
                                        <span class="unitsInStock">Units in stock: #= UnitsInStock #</span>
                                    </div>                                    
                                    <div class="unitPrice right">$#= UnitPrice #</div>
                                </div>
                            </li>
                            </ItemTemplate>
                        </DataBinding>
                    </ClientSettings>
                </telerik:RadListView>
                <div class="pager">
                    <hr />
                    <telerik:RadSlider RenderMode="Lightweight" ID="pageSlider" runat="server" MaximumValue="0" ItemType="Tick" Height="50px" Width="500px">
                    </telerik:RadSlider>
                    <span runat="server" class="pagerLabel" id="PagerLabel">Page 1 of 10</span>
                    <hr style="clear: both;"/>
                </div>
            </div>
            <div class="filterSortPanel">
                <div class="filterPanel commonPanel">
                    <h3>filter</h3>
                    <span>By Price:</span>
                    <telerik:RadSlider RenderMode="Lightweight" ID="priceSlider" runat="server" Height="50px" IsSelectionRangeEnabled="true" ItemType="Item" Width="240px">
                    </telerik:RadSlider>
                    <hr />
                    <span>By units in Stock:</span>
                    <telerik:RadSlider RenderMode="Lightweight" ID="stockSlider" runat="server" Height="50px" IsSelectionRangeEnabled="true" ItemType="Item" Width="240px">
                    </telerik:RadSlider>
                    <hr />
                </div>
                <div class="sortPanel commonPanel">
                    <h3>Sorting</h3>
                    <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" Height="200px" Width="100%"
                        EnableDragAndDrop="true" AllowReorder="true" ButtonSettings-ShowReorder="false" ToolTip="Drag to reorder fields">
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="sdf2" ToolTip="Click to change sort order" /><%# DataBinder.Eval(Container, "Text")%>
                        </ItemTemplate>
                        <Items>
                            <telerik:RadListBoxItem Text="Units In Stock" Value="UnitsInStock"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Name" Value="ProductName"></telerik:RadListBoxItem>
                            <telerik:RadListBoxItem Text="Unit Price" Value="UnitPrice"></telerik:RadListBoxItem>
                        </Items>
                    </telerik:RadListBox>
                </div>
            </div>
        </div>
    </div>
         </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?