Data Access has been discontinued. Please refer to this page for more information.

How to: Use DataSource

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 a class library with a fluent model based on the SofiaCarRental database (you could create such a solution, following the steps outlined in the Creating a New Web Application and The Model article). Additionally, the context is exposed through an ASP.NET Web API Service (a sample implementation of such a service is demonstrated in the Creating ASP.NET Web API Controllers article).

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 }
               },
           }
       }
   }
});

Further References