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

How to: Bind DataGrid to Remote Data

The Kendo Grid component displays tabular data and offers rich support interacting with data, including paging, sorting, grouping, and selection. Grid is a powerful widget with many configuration options. It can be bound to local JSON data or to remote data using the Kendo DataSource component.

This topic demonstrates how to use the Kendo Grid component. You will see how to bind a Grid 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).

Data Binding - Remote

The Grid can bound to remote data by specifying the dataSource option. The data source can either be created outside the grid or passed in. If you have multiple widgets bound to the same data, you would create the data source as an object that you could reference in different widgets. The following example demonstrates how to bind a Grid widget to a DataSource configured to support CRUD operations.

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 }
               },
           }
       }
   }
});
      $("#grid").kendoGrid({
          dataSource: categoriesDataSource,
          columns: [
              {
                  field: "CategoryID",
                  title: "Id"
              },
              {
                  field: "CategoryName",
                  title: "Name"
              },
              {
                  field: "ImageFileName",
                  title: "ImageUrl"
              }]
      });
  })

Inserting Records

If you want to enable new records insertion the toolbar should be configured. Also the editable option should be specified:

$("#grid").kendoGrid({
   dataSource: categoriesDataSource,
   columns: [
       {
           field: "CategoryID",
           title: "Id"
       },
       {
           field: "CategoryName",
           title: "Name"
       },
       {
           field: "ImageFileName",
           title: "ImageUrl"
       }],
   toolbar: ["create"],
   editable: "popup"
});

Deleting and Updating Records

Additionally, in order to edit and delete records, edit and destroy command columns should be defined:

$("#grid").kendoGrid({
   dataSource: categoriesDataSource,
   columns: [
       {
           field: "CategoryID",
           title: "Id"
       },
       {
           field: "CategoryName",
           title: "Name"
       },
       {
           field: "ImageFileName",
           title: "ImageUrl"
       },
       { command: ["edit", "destroy"] }],
   toolbar: ["create"],
   editable: "popup"
});

Further References