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

How to: Bind DataGrid to Remote Data

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 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 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.

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