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 |
---|
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 |
---|
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 |
---|
var dataSource3 = new Telerik.Data.DataSource({
transport: {
read: {
url: "http://services.odata.org/V3/Northwind/Northwind.svc/Employees",
dataType: "json",
}
},
schema: {
data: "value"
}
});
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