The Q1 2012 beta release is out the door and we have some exciting new improvements to brag about. Among everything else is a feature long waited for - client-side databinding for RadListView. In a series of blog posts, I will try to introduce you to the specifics of the client-side databinding with RadListView and give you some insight into the new client capabilities that you can leverage to build performant data bound UI on the client. We will start with a brief introduction to HTML templates, binding expressions and databinding API, we'll go down to databinding to web services and various data sources and will finish off with some advanced topics like client-side paging, sorting, filtering and item selection support.
If you want to skip sections ahead, here is a brief table of contents that you can follow:
To start off, let's clarify what does client-side databinding mean for a control that is entirely template-driven and does not have UI of its own. If you have ever worked with the ASP.NET ListView control, or its older sibling - the Repeater, you already know what a template-driven control means. These are, essentially, databound lists. The developer uses a series of template definitions to give the list a layout of its own. During databinding, templates are instantiated sequentially for every item from the data source and you get the final UI rendered into the browser. This all happens on the server-side. Telerik RadListView for ASP.NET AJAX already extends this server-side databinding model, providing additional templates, paging, sorting, filtering and grouping off-the-box.
Starting with Q1 2012, we have extended this databinding model to the client. You can now use HTML templates to define a layout that is databound entirely on the client-side. RadListView provides quite an extensive set of templates available for client binding:
People already using RadListView with server-side databinding will immediately recognize
these template names. They work the same with client-side databinding too. The major
difference is, while server templates are defined as first-level children of the
RadListView control in the markup, all client templates are exposed
as properties under
RadListView.ClientSettings.DataBinding. Also, the
server templates allow server controls, naturally. The client templates are nothing
more than string properties, so they allow HTML only.
Let's get to the interesting part and define a rather simple client-bound RadListView. Just like with server-side databinding, you need at least 3 definitions to make a list view show up on your page:
Let's define the skeleton of a simple RadListView that will be used to render an unordered list in the browser:
We define our
LayoutTemplate to contain a
We further give this element and
id attribute. By setting the
property the value of this ID, we instruct RadListView to take the unordered list
as the parent container for all items that will be rendered by RadListView. Without
specifying the HTML element that will contain all databound items, there is no way
for RadListView to tell where it should place the rendered items during databinding.
Once we setup our layout and item place holder, we can define an
that will be rendered for every bound item during databinding. In our case, we specify
<li> element that will represent an item in the resulting unordered
NOTE: Client-side templates in RadListView are plain string properties. Even though you can define them in the markup view in Visual Studio, no IntelliSense support is provided. Code completion for HTML tags is the best Visual Studio can offer when editing string templates.
We have defined our basic UI in the above RadListView. Let's see how we can make the list view show some data inside the HTML elements we have put in there. We can use a set of binding expression in the client-side HTML templates in RadListView.
||Data||Evaluates the expression and outputs the result in the template.|
||Code||Evaluates the code expression inside. Does not output value.|
||HTML-encoded string||Same as the data expression, but HTML-encodes the result.|
In a server-bound template, you can use the
<%# ... %> binding
expression along with
Eval() to render the value of a field from the
data item. Equivalently, with a client-bound template, you can use the
name] # expression to render the value of a data field.
Turning back to our RadListView definition, let's define a binding expression that will show the value of a field id in our list items:
We have defined a binding expression in the
ItemTemplate, telling RadListView
to render the value of the id field in the data items as content of the list
The actual databinding is done through the client-side RadListView API. We need
to find the RadListView client component once the page and the client-side AJAX
framework have finished loading. The auto-registered
is a good candidate. We then set the list view data source and databind:
We run the page to see what we've created and get our first client-bound RadListView:
That wasn't so difficult, was it? We made our list view render a couple of HTML
elements right in the browser after page load. Let's go on and test some other binding
expressions. You have probably noted the above sample data items have a
field that contains HTML. If we keep using the
#= ... # expression
with this field, we will get the values in this field rendered and interpreted as
HTML in the browser:
If we need to ensure HTML in field values is encoded, we can use the
#: ... #
Jeremy Askenas has started a nice little test bench on jsperf.com that tests the performance of these template engines. Later revisions add even more templating implementations.
identical templates. This function can additionally be provided with a so called
of any binding expressions inside the HTML template. In our RadListView, the
contained a couple of binding expressions. These expressions were evaluated in the
context of an object - the binding context. The
fields that we used in our binding expressions are part of the fields in this binding
NOTE: The binding context of an HTML template is not the same as the execution
context of a function. In your binding expressions,
this.id is not
id. Do not use
this in your binding expressions.
In RadListView, all fields from the data item bound to a particular template are
copied over to the binding context. In our example, the
value fields are copied to the context of the binding expressions
ItemTemplate. Additionally, here is a list of all fields
and functions available in the context of the binding expressions:
|Field or Function||Description|
||The current RadListView instance. Can be used for calling methods of the component.|
A formatting function that can format Date and Number values. This function is based
on the MS AJAX
The following context fields are available only in the
||The original JSON data object that the template is binding to.|
||The index of the currently databinding item in the current data source.|
||The index of the item in the set of all RadListView data. This field has a meaning only when paging is enabled. It indicates the page-invariant index of the item.|
||Indicates if the current item is selected|
The above lists is expected to grow, so don't take it as the definitive API reference. The only definitive reference for any control is the online help documentation.
Using the above context fields, you have access to the RadListView client component,
item indices and selected state at your disposal during template databinding. The
format() function is worth a better explanation. It can be used to
format numeric and date values from your data items during databinding.
Turning back to our RadListView example, we can see the
in the data items is a numeric field, possibly representing a currency value. Using
format() in our binding expressions, we can render the values from
this field formatted as currency:
The result of the
format() function is a string representing a currency
value in the format we specified:
If we managed to catch your attention, don't stop here. Try the live RadListView demos, download the trial today and give the sweet stuff a go yourself. Leave a comment, suggestion or share the joy below in the comments or in our beta forums.
Subscribe to be the first to get our expert-written articles and tutorials for developers!