This is the third and last in a series of blog posts on the new client-side databinding
features we've introduced to RadListView
with the Q1 2012 release. In the
first blog post, we introduced you to the basics of client-side databinding
in RadListView - how to define HTML templates, how to use binding expressions and
what properties does the binding context provide for greater flexibility. In the
second blog post we showed you how easy it is to bind to any kind of web
services. In this blog post, let's dive deeper into the client-side databinding
internals in RadListView. We'll see how to implementing paging, sorting and filtering
to conveniently shape the data in your applications. These features work with the automatic
web service binding in RadListView to provide a powerful data querying mechanism.
We'll also see how item selection
can be set up in RadListView and how efficiently it works.
Here is a quick index of the sections ahead:
No doubt, client-side paging is a useful thing. Client-side development is all about
performance and responsiveness. Having to load tons of data from the server all
at once is the first thing that can hog your application. Conveniently, RadListView
provides a nice set of APIs to help you implement data paging in your application.
Just like server-side paging, you enable paging on the client using the
property of the control. However, for paging to work, RadListView needs to be taught
how many items are there in total. You do that using the client-side
property setter. In our previous blog post, we saw different ways of accessing the
total row count from a web service. This is, essentially, to tell RadListView how
it needs to setup its paging parameters:
Once total row count is set, RadListView configures the value of the
property, having in mind the total row count as well as the value of
Page count is read-only, while page size can be set using
Changing the page can be done in 2 different ways:
The second approach is briefer to type and can be used in various "code snippet
in markup" scenarios:
The above markup shows a very basic pager rendered into the client-side
in RadListView. As you can see, the
page() method can accept a numeric
parameter, indicating the new page index to change to, or one the following string commands:
First - go to first page
Prev - go to previous page
Next - go to next page
Last - go to last page
page() method provides a handy single-line call to RadListView's
automatic rebinding mechanism. When the method is called, RadListView updates the
paging parameters and rebinds automatically. Thus, if your web service supports
paging parameters, you get automatic data paging with a one-liner. Try the new
RadListView Web Service DataBinding Demo for a live example of client-side
Data sorting is another useful feature we've added to RadListView. Similar to paging, RadListView updates
and sends a bunch of sorting parameters to the web service it is bound to. The web service can then respond
with the sorted result. To enable sorting, RadListView exposes a set of "sort expressions" accessible
The above code adds a sort expression to the collection. It specifies that data is to be sorted by the
ProductID field in an ascending order. Accepted values for the
"DESC". When the listview rebinds, sort expressions are sent
to the web service in a format specified by the
server control property. Possible values are:
These available options cover the bulk of sort formats accepted by web services. The web service can parse the sort expression
and apply sorting to the resulting data.
Conveniently, we've also provided the
sort(field, order) method in RadListView. It adds a sort expression
visual elements that sort the data in the control. The second parameter can be omitted, in which case the sort expression
is "toggled" between the ascending and descending state. If
AllowNaturalSort is enabled in RadListView, the
control removes the sort expression altogether after toggling from descending order.
Client-side sorting is demonstrated in the
RadListView Programmatic Client-Side DataBinding Demo and explained in detail in the
RadListView Sorting & Filtering Help Topic.
Similar to sorting, client-side filtering works by sending a set of filter expressions to the web service.
The web service can then use the filter string to filter the resulting data set. Just like sorting, filtering is managed
by a collection of filter expressions accessible through the
get_filterExpressions() property. This collection
provides a set of methods for manipulating filter expressions:
add(fieldName (String), filterFunction (String), filterValue (Object))
insert(index (Number), fieldName (String), filterFunction (String), filterValue (Object))
remove(fieldName (String), filterFunction (String), filterValue (Object))
indexOf(fieldName (String), filterFunction (String), filterValue (Object))
Notedly, these methods are convenient for retrieving, adding to and removing items from a flat collection of filter
expressions. Sucessive expressions added using
insert() are appended together
AND logical operator:
value parameters are self-descriptive, but the
parameter can take one of the client-side
Telerik.Web.UI.RadListViewFilterFunction enumeration values:
When using filter functions that do not require a filter value (IsEmpty, NotIsEmpty, IsNull, NotIsNull, Group), the
filterValue parameter can be omitted.
Using the above listed methods for adding and manipulating filter expressions is all nice and easy, but filter expressions
may not always be logically concatenated with the
AND logical operator. They can also be nested and
(ID > 5 OR (Name starts with "B" AND Year < 2012))
The above complex filter expression cannot be easily built with the APIs provided by the filter expressions collection.
Frequent users of the more advance RadListView server capabilities will remember that RadListView provides a
fluent server-side API for building filter expressions when using server-side databinding. We wanted to provide this same
flexibility for client-side databinding too. That's why RadListView exposes a client-side fluent filter expression builder. Using
the expression builder, it's super easy to build the above complex filter expression:
expression trees. Similar to sort expressions, filter expressions are serialized to your web service in
different formats, controlled by the
server control property. Client-side filtering is demonstrated in the
RadListView Client-Side Web Service DataBinding Demo and explained in detail in the
RadListView Client-Side Sorting and Filtering help topic.
I believe item selection needs no explanation. Providing selection capabilities to your listview
control is essential for enabling basic interaction between your users and your application.
RadListView provides a robust mechanism to enable selecting data items. However, as the control
does not render any HTML UI of its own, the developer needs to hook up event handlers to HTML
elements to enable selection. Then the RadListView client APIs can be used to do the acual
selection of a single or multiple items.
Every item in RadListView is characterized by a zero-based numeric index. The
set_selectedIndexes(indexArray) property setter can be used to provide a collection of
indexes for selecting multiple items. The control needs to be rebound to reflect the changes after that:
To decorate your selected items, RadListView provides the client-side
This template is rendered for every selected item in the listview during databinding. Using this
template, you can provide a selection-specific view of your item, e.g. change the background color,
apply a selection-specific CSS class, bind different data, etc.
To further ease selection, RadListView provides the following convenience methods that not only
update the selected indexes, but also automatically rebind the listview and apply the changes:
All the above methods can be conveniently used in one-line event handler definitions in your
As these methods automatically rebind the listview and apply the necessary changes, it is now very
easy to define a simple DOM event handler on an arbitrary element and have it select the target item
The first three methods in the above list deserve some further attention. You will note that they
manipulate the selected state of a single item. Rebinding the entire RadListView control to change
the selected state of a single item would be a tremendous overkill. With a large number of items,
this could turn into a nasty performance issue. That is why, we've taken a more intelligent approach
for single item selection.
toggleSelection() do not rebind the entire control by default. They only rebind the
HTML of the target item. That is, the listview is intelligent enough to identify the markup rendered
for the specified single item, wipe it out and create a new piece of HTML, placing
it in the same place in the HTML flow. Thus, selection is super fast, when it only needs to clear
and recreate a small piece of HTML.
Client-side item selection is demonstrated in the
RadListView Client-Side Web Service DataBinding Demo and explained further in the
RadListView Client-Side DataBinding Basics help topic.
In this blog post, we dived depeer into some advanced client-side databinding features
in RadListView. Equipped with these, we believe RadListView is the right choice
for any type of client-side databinding scenario ASP.NET developers out there may
require. To go on further, try the
RadListView demos, refer to the
online help, or
download a trial and give it a try yourself. As usual, your comments,
suggestions, praises or critiques are more than welcome in the comments section