Telerik UI for Windows 8 HTML

Using DataSource with UI controls

The DataSource component can be used together with data-bound controls like RadChart, RadGrid, RadAutoComplete etc. These UI controls have a dataSource property that is of type Telerik.Data.DataSource. DataSource settings for these controls can be set either declaratively through the HTML data-win-options attribute, or dynamically through JavaScript. See the next two code samples for examples of setting the dataSource property for the RadChart control.

Here is an example mark-up of a RadGrid, that is bound to a DataSource. Note that the DataSource's fields are used to set up other properties in the RadGrid like the columns definition.

Grid Mark-Up Copy imageCopy
<div id="grid" data-win-control="Telerik.UI.RadGrid" data-win-options="{
        dataSource: External.DataSource,
        columns: [
            {field: 'ID', width: 50},
            {field: 'Name'},
            {field: 'Description'},
            {field: 'Price'},
            {field: 'Rating'},
        ],
        height: 257
    }"></div>

Below you can find the actual DataSource declaration. It is bound to a remote web service and has a parsing function to transform the response to the current needs. The DataSource is initialized in a namespace so it can be referenced in the mark-up. Alternatively you can bind the DataSource to the control programmatically.

DataSource Declaration Copy imageCopy
WinJS.Namespace.define("External", {
    DataSource: new Telerik.Data.DataSource({
        transport: {
            read: {
                url: "http://services.odata.org/V3/OData/OData.svc/Products",
                dataType: "json"
            },
        },
        schema: {
            parse: parseResponse
        }
    }),
});

And here is the parsing function for reference:

Parsing Function Copy imageCopy
function parseResponse(response) {
    var parsedResponse = [];

    response.value.forEach(function (item) {
        parsedResponse.push({
            ID: item.ID,
            Name: item.Name,
            Description: item.Description,
            Price: parseFloat(item.Price),
            Rating: item.Rating
        });
    });
    return parsedResponse;
}

Additionally you can bind a single instance of the DataSource object to multiple data-bound controls. Below is an example of a RadChart and a RadDropDownList, that are bound to the same DataSource.

Controls Mark-Up Copy imageCopy
<div id="chart" data-win-control="Telerik.UI.RadChart" data-win-options="{
        dataSource: External.DataSource,
        series: [
            {
                type: 'column',
                field: 'Rating',  
            }
        ],
        categoryAxis: {
            field: 'Name'
        },
        theme: 'light'
    }"></div>

<span id="dropdown" data-win-control="Telerik.UI.RadDropDownList" data-win-options="{
        dataSource: External.DataSource,
        dataTextField: 'Name',
        dataValueField: 'ID'
    }"></span>

Finally you can see three images of the three controls, that were bound to the same DataSource simultaneously:

datasource-ui-grid
datasource-ui-chart
datasource-ui-dropdown
Caution

The transport, schema and type properties used with binding to remote data can be specified during initialization only. They are read-only after the DataSource instance is created.