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

In this task, you will modify CRUDPage.html to support update operations.

1. Open CRUDPage.html.

2. Configure the DataSource for remote Update operations. Note that the resource you will use is the same - /api/categories. However, the type of the operation is set to PUT.

   var categoriesDataSource = new kendo.data.DataSource(
      {
          transport: {
              read: {
                  url: "/api/categories",
                  dataType: "json"
              },
              create: {
                  url: "/api/categories",
                  dataType: "json",
                  type: "POST"
              },
              update: {
                  url: "/api/categories",
                  dataType: "json",
                  type: "PUT"
              }
          },
          // schema configuration....
      });
   

3. In order to update records in the grid, an Edit command should be defined.

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

4. Now if you run CRUDPage.html and test the update functionality, it will not work. The server will return 404 Not Found. The reason is that the Put method in the CategoriesController expects two parameters - Put(Int32 id, Category entity). At the same time, the Kendo DataSource sends to the server only an instance of the Category entity, i.e. only the second parameter.

   

5. To overcome this issue, you will need to create an overload of the Put method that accepts only a Category entity. There you will call the original Put method by passing the Id and the Category parameters. Define the second Put method in a new partial class.

   public partial class CategoriesController
   {
      public virtual HttpResponseMessage Put( Category entity )
      {
          return this.Put( entity.CategoryID, entity );
      }
   }
   

   Namespace CarRentWebSite
       Partial Public Class CategoriesController
           Public Overridable Function Put(ByVal entity As Category) As HttpResponseMessage
               Return Me.Put(entity.CategoryID, entity)
           End Function
       End Class
   End Namespace
   

6. Build your solution to refresh the API changes on the server and test again the Edit functionality.

   The complete JavaScript for the ready() event is listed below:

   $(document).ready(function () {
      var categoriesDataSource = new kendo.data.DataSource(
          {
              transport: {
                  read: {
                      url: "/api/categories",
                      dataType: "json"
                  },
                  create: {
                      url: "/api/categories",
                      dataType: "json",
                      type: "POST"
                  },
                  update: {
                      url: "/api/categories",
                      dataType: "json",
                      type: "PUT"
                  }
              },
              // schema configuration....
              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"
              },
              { command: ["edit"] }],
          toolbar: ["create"],
          editable: "popup"
      });
   })
   

In the next tutorial, you will modify the CRUDPage.html so it supports delete operations.