How to: Use DataSource
This article is relevant to entity models that utilize the deprecated Visual Studio integration of Telerik Data Access. The current documentation of the Data Access framework is available here.
The Kendo DataSource component is an abstraction for using local (arrays of JavaScript objects) or remote (XML, JSON, JSONP) data. It fully supports CRUD (Create, Read, Update, Destroy) data operations and provides both local and server-side support for sorting, paging, filtering, grouping, and aggregates.
This topic demonstrates how to use the Kendo DataSource component. You will see how to bind a DataSource to remote data.
Suppose you have an ASP.NET Web Application and you have exposed a Telerik Data Access Domain Model through an ASP.NET Web API Service. The domain model is based on the SofiaCarRental database. In this topic an ASP.NET Web API Service is used, but you can use any other kind of service.
The process of creating a DataSource for remote data includes:
- Identifying the protocol(s).
- Specifying URL(s) of endpoints.
- Specifying serialization format(s) for any/all CRUD operations.
The following example shows how to configure a DataSource to read data from a remote endpoint:
var categoriesDataSource = new kendo.data.DataSource(
{
transport: {
read: {
url: "http://localhost:<portnumber>/api/categories",
dataType: "json"
}
},
schema: {
model: {
id: "CategoryID",
fields: {
CategoryID: {
editable: false,
nullable: false,
type: "number"
},
CategoryName: {
type: "string",
validation: { required: true }
},
ImageFileName: {
type: "string",
validation: { required: true }
},
}
}
}
});
The variable categoriesDataSource is a DataSource that is initialized to represent an in-memory cache of categories from a ASP.NET Web API Service. http://localhost:<portnumber> is the actual address. The DataSource is only configured to ac as a read-only source of data to any widgets to which it is bound. The data provided from the service is not loaded until the .read() method is invoked. When the DataSource is bound to any widget, the explicit invocation is not necessary. The default configuration of the widgets is set to automatically bind to an associated DataSource.
The transport object defines how you will communicate with the remote data source. read and url are pretty self-explanatory. dataType tells the data source the format that you expect the response to be in. In this case, it is json.
schema tells what is the schema of the response. When you bind a DataSource component to a Grid, Kendo UI will look for this element to represent each row in the grid.
Configuring DataSource for Remote Create, Update and Delete (Destroy) Operations
In the previous section, the DataSource component was configured as read-only. To enable Create, Update and Delete operations, you should set the create, update and destroy objects. The following example demonstrates how to do this:
var categoriesDataSource = new kendo.data.DataSource(
{
transport: {
read: {
url: "http://localhost:<portnumber>/api/categories",
dataType: "json"
},
create: {
url: "http://localhost:<portnumber>/api/categories",
dataType: "json",
type: "POST"
},
update: {
url: "http://localhost:<portnumber>/api/categories",
dataType: "json",
type: "PUT"
},
destroy: {
url: "http://localhost:<portnumber>/api/categories",
dataType: "json",
type: "DELETE"
}
},
schema: {
model: {
id: "CategoryID",
fields: {
CategoryID: {
editable: false,
nullable: false,
type: "number"
},
CategoryName: {
type: "string",
validation: { required: true }
},
ImageFileName: {
type: "string",
validation: { required: true }
},
}
}
}
});