Telerik UI for Windows 8 HTML
Contents

The DataSource is a data component that serves as an abstraction over local and remote data. Furthermore, it is used to retreive data and maintain its structure, in addition to performing sorting, paging, filtering, editing and grouping of data, and calculating aggregates upon it.

This topic contains the following sections.

Prerequisites for Using the DataSource Control

If you have already taken the steps needed for adding a UI control to the page, you do not need to do anything else to be able to use the DataSource component. In case you do not have another Telerik control in the page, follow the steps listed in the following article, apart from those used to reference CSS files:

Adding Telerik UI for Windows 8 HTML to a HTML Page

Binding to Local Data

To create a DataSource instance bound to a local data array, pass the array as the data property during initialization.

JavaScript Copy imageCopy
var internetUsers = [{ country: "US", value: 67.96 }, { country: "Mexico", value: 68.93 }];
var dataSource1 = new Telerik.Data.DataSource({
    data: internetUsers
});

dataSource1.read().then(function () {
    var data = dataSource1.view;
});

Alternatively, you can pass the local data array directly as a first argument to the constructor:

JavaScript Copy imageCopy
var internetUsers = [{ country: "US", value: 67.96 }, { country: "Mexico", value: 68.93 }];
var dataSource2 = new Telerik.Data.DataSource(internetUsers);

dataSource2.read().then(function () {
    var data = dataSource2.view;
});

In this example, the variable, internetUsers, is a DataSource instance that is initialized to represent an in-memory cache of the internetUsers array.

Note

The data represented is not loaded in the DataSource until the .read() method is called.

When the DataSource is a part of a UI control (the dataSource object in all databound Telerik controls), explicit invocation of the read() method is not needed since the controls do it automatically.

Binding to Remote Data

The DataSource provides a flexible API for binding to remote web services that can return data formatted as JSON or XML.

To configure remote web service binding, use the transport option during initialization. Below you can see a simple example. For full description of how to set remote binding, check this article:

Configuring Remote Binding

JavaScript Copy imageCopy
var dataSource3 = new Telerik.Data.DataSource({
    transport: {
        //use the read option for specifying a location to read data from
        read: {
            url: "http://services.odata.org/V3/Northwind/Northwind.svc/Employees",
            dataType: "json", //specify the type of expected data explicitly
        }
    },
    schema: {
        data: "value"
    }
});
//when the data is already needed, call read
dataSource3.read().then(function () {
    var data = dataSource3.view;
});
Note

Same as with local binding, the DataSource will not fetch the data until the read() method is called.

When the DataSource is a part of a UI control (the dataSource object in all databound Telerik controls), explicit invocation of the read() method is not needed since the controls do it automatically.

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.

For information about the built-in capabilties of the control for working with the assigned data, check the specific articles from the Other Resources list below.

See Also