DataSource Overview
The Kendo UI DataSource component plays a central role in practically all web applications built with Kendo UI. It is an abstraction for using local data—arrays of JavaScript objects—or remote data—web services returning JSON, JSONP, oData or XML.
The Kendo UI DataSource has many abilities and responsibilities, among which to:
- Retrieve data from a remote endpoint.
- Maintain the structure and type of the data (
schema). - Process serialization formats to and from a remote endpoint.
- synchronize updates—create, update, delete to and from a remote endpoint.
- Maintain an in-memory cache of data, including changes for updating to a remote endpoint.
- Calculate and maintain aggregates, sorting order and paging.
- Provide a query mechanism via filter expressions.
In other words, the DataSource fully supports CRUD (Create, Read, Update, Destroy) data operations, and provides both client-side and server-side support for sorting, paging, filtering, grouping, and aggregates.
For detailed information on the capabilities of the DataSource, refer to its configuration API, methods, and events, and demos.
DataSource Binding
This article provides simple examples, which show how to create Kendo UI DataSource instances bound to local or remote data, and DataSource instances, which are used by a single Kendo UI widget or by multiple widgets.
To Local Data
In this scenario an array of JavaScript objects is assigned to the data configuration property of the DataSource instance, as demonstrated in the example below.
Example
var movies = [{
title: "Star Wars: A New Hope",
year: 1977
}, {
title: "Star Wars: The Empire Strikes Back",
year: 1980
}, {
title: "Star Wars: Return of the Jedi",
year: 1983
}];
var localDataSource = new kendo.data.DataSource({
data: movies
});
To Remote Service
In this scenario the DataSource needs information about the web service URLs, the request type, the response data type, and the structure (schema) of the response, if it is more complex than a plain array of objects. You are also able to provide custom parameters, which are going to be submitted during the data request.
Example
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: "http://api.openweathermap.org/data/2.5/find",
// the request type
type: "get",
// the data type of the returned result
dataType: "json",
// additional custom parameters sent to the remote service
data: {
lat: 42.42,
lon: 23.20,
cnt: 10
}
}
},
// describe the result format
schema: {
// the data, which the data source will be bound to is in the "list" field of the response
data: "list"
}
});
Mixed Data Operations Mode
Make sure that all data operations (paging, sorting, filtering, grouping, and aggregates) are configured to take place either on the server, or on the client. While it is possible to use a mixed data operations mode, setting some of the data operations on the server and others on the client leads to undesired side-effects.
For example, if serverPaging is enabled and serverFiltering is disabled, the DataSource will filter only the data from the current page and the user will see less results than expected. In other scenarios, the DataSource might make more requests than necessary for the data operations to execute.
Widget Binding
Many Kendo UI widgets support data binding, and the Kendo UI DataSource is an ideal binding source for both local and remote data.
To Local DataSource
A DataSource can be created in-line with other Kendo UI widget configuration settings, as demonstrated in the example below.
Example
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: new kendo.data.DataSource({
data: [
{
employee: "Joe Smith",
sales: 2000
},
{
employee: "Jane Smith",
sales: 2250
},
{
employee: "Will Roberts",
sales: 1550
}]
}),
series: [{
type: "line",
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
}
});
To Remote DataSource
You can also create a shared DataSource to allow multiple Kendo UI widgets to bind to the same data collection. The main benefits of using a shared DataSource are fewer data requests, better performance and automatic synchronized refreshing of all widgets bound to the same DataSource instance, when the data changes.
Example
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data-service.json",
dataType: "json"
}
}
});
// Bind two UI widgets to the same DataSource
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: sharedDataSource,
series: [{
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
}
});
$("#grid").kendoGrid({
dataSource: sharedDataSource,
columns: [
{
field: "employee",
title: "Employee"
},
{
field: "sales",
title: "Sales",
template: '#= kendo.toString(sales, "N0") #'
}]
});
See Also
Other articles on the Kendo UI DataSource component:
