Telerik blogs

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:

  1. Paging
  2. Sorting
  3. Filtering
  4. Selection

Paging

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 AllowPaging 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 set_virtualItemCount(value) 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:

code snippet

Once total row count is set, RadListView configures the value of the get_pageCount() property, having in mind the total row count as well as the value of get_pageSize(). Page count is read-only, while page size can be set using set_pageSize(value).

Changing the page can be done in 2 different ways:

code snippet

or

code snippet

The second approach is briefer to type and can be used in various "code snippet in markup" scenarios:

RadListView

The above markup shows a very basic pager rendered into the client-side LayoutTemplate 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

The 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 paging.

Sorting

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 through the get_sortExpressions() property:

RadListView

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 order parameter are "ASC" or "DESC". When the listview rebinds, sort expressions are sent to the web service in a format specified by the RadListView.ClientSettings.DataBinding.DataService.SortParameterType server control property. Possible values are:

  • List - sort expressions are sent as a JSON-serialized array of objects:
    [{FieldName: "ID", SortOrder: "Ascending"}, {FieldName: "Name", SortOrder: "DESC"}]
  • Sql - sort expressions are sent as an SQL ORDER BY-compatible string:
    ID ASC, Name DESC
  • Linq - sort expressions are sent as a Dynamic LINQ expression:
    ID, Name descending
  • OData - sort expressions are sent as an OData $orderby-compatible epxressions:
    ID, Name desc

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 and automatically rebinds the control. This enables single-line javascript event handlers attached to buttons or other 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.

Filtering

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))
  • removeAt(index(Number))
  • indexOf(fieldName (String), filterFunction (String), filterValue (Object))
  • clear()
  • get_count()

Notedly, these methods are convenient for retrieving, adding to and removing items from a flat collection of filter expressions. Sucessive expressions added using add() or insert() are appended together using the AND logical operator:

RadListView

The fieldName and value parameters are self-descriptive, but the filterFunction parameter can take one of the client-side Telerik.Web.UI.RadListViewFilterFunction enumeration values:

  • Contains
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • StartsWith
  • EndsWith
  • Group

When using filter functions that do not require a filter value (IsEmpty, NotIsEmpty, IsNull, NotIsNull, Group), the third 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 OR-ed:

(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:

RadListView

or

RadListView

Using the fluent expression builder in your javascript makes it straightforward to build complex filter expression trees. Similar to sort expressions, filter expressions are serialized to your web service in different formats, controlled by the RadListView.ClientSettings.DataBinding.DataService.FilterParameterType 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.

Selection

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 get_selectedIndexes() property in RadListView returns a javascript array of all selected indexes in the control. Equivalently, 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:

RadListView

To decorate your selected items, RadListView provides the client-side SelectedItemTemplate. 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:

  • selectItem(index(Number))
  • deselectItem(index(Number))
  • toggleSelection(index(Number))
  • selectAllItems()
  • clearSelectedItems()

All the above methods can be conveniently used in one-line event handler definitions in your template markup:

RadListView

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 on interaction.

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. selectItem(), deselectItem() and 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 below.


About the Author

Veli Pehlivanov

is a Technical Lead at one of Telerik’s ASP.NET AJAX teams, where he primarily works on RadGrid and a few other data- and input-centric controls, including RadListView, RadCalendar and RadInput. Veli's interests lie in the area of web development, C#, .NET, JavaScript and agile project management. He likes being on the cutting edge of technology and is keen on delivering efficient software and a greater value for the user.

Related Posts

Comments

Comments are disabled in preview mode.