Updating Data

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 the CategoriesController class.

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

   Public Overridable Function Put(ByVal entity As Category) As HttpResponseMessage
       Return Me.Put(entity.CategoryID, entity)
   End Function
   

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.