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);