For developers: RadGrid binder

RadGridBinder is a control which is used to bind the Telerik RadGrid with a data provided by the RESTful WCF service. RadGridBinder represents a bridge between the Telerik RadGrid which supports client side binding and provides rich client side API and Sitefinity CMS WCF services that enables codeless, declarative binding of the grid.

In this first article we are going to examine a simple scenario in which the Telerik RadGrid is bound to the Stores WCF service (used in XML engine documentation).

Since the implementation of the actual service is a different topic which is also covered, we'll assume that the service has been created and is ready to be used.

In this first example we are going to simply bind the collection of the stores to the Telerik RadGrid.

The sample above was implemented as a standard stand-alone ASP.NET page.

Under assumption that our service will return some data, this page when run, would look something like this:

Binder setup: If you are developing inside of the Sitefinity CMS admin area, it is not necessary to declare ScriptManager control or add anything to the body element, since all this has been implemented on the base Sitefinity CMS admin page.

We can turn on paging or sorting and customize it as we see fit, relying on the RadGridBinder control to interpret this settings and provide the grid with the correct data.

An important concept that we need to grasp here is the concept of client side templates. The actual data templates we will declare in the RadGridBinder control and in the grid we are merely marking the placeholders for these templates.

Notice how we have two GridTemplateColumn templates with UniqueName properties set to "BinderContainer0" and "BinderContainer1". It is those two controls that will be replaced with actual templates and data on the client once the grid is bound. 

Declaring the RadGridBinder control

Now that we have declared the Telerik RadGrid control, we will declare the RadGridBinder control which will be in charge of binding the data from WCF service to the grid. You can think of RadGridBinder control being similar to the data source controls, however, in addition to providing the data, RadGridBinder also performs the actual binding logic.

Let us examine the declaration of the RadGridBinder control:

Mapping grid columns to binder containers: Only the columns of type GridTemplateColumn and UniqueName that starts with "BinderContainer" and ends in the index of the binder container will be taken into consideration by RadGridBinder. All other columns will be left as they are.

We notice several properties being declared on this control, so let's explain them chronologically (note that those are not all the properties you can set - take a look at the RadGridBinder reference for a more detailed description).

• ServiceUrl - url of the RESTful WCF service which provides the data for this binder
• BindOnLoad - if true, binder will bind the data to grid as soon as the page loads, othewise a client side method will need to be called (e.g. resourcesBinder.DataBind() - more on client side API of binders can be found in the client side API section).
• TargetId - id of the RadGrid control to which the binder will bind the data
• DefaultSortExpression - the sort expression to be used the very first time data is bound.
• DataMembers - comma delimited list of the properties used by the binder and provided by WCF service. Note that these can be some or all of the properties that have been marked as DataMember on the DataContract supplied by the given service.
• DataKeyNames - comma delimited list of the properties that represent the identity (or primary key) of the given DataContract.

Now that we have covered the properties, all we are left with is the collection of Containers defined by our RadGridBinder. These containers are actually the client side templates (ASP.NET AJAX 4.0 client side templates) that are to be used inside of the RadGrid. If you remember, we've declared two GridTemplateColumn columns in the grid with UniqueName properties set to "BinderContainer0" and "BinderContainer1".

By doing so, we have instructed the binder to instantiate the first container (or client template) in the column with UniqueName set to "BinderContainer0" (we are using zero based index here) and second binder in the column with UniqueName set to "BinderContainer1". The actual declarations of BinderContainer controls are very simple: