Creating, updating, and deleting in Grid

Editing the records right within the Grid is another common task. The Kendo UI Grid allows users to edit the content in the Grid, which is similar to editing the cells in an Excel sheet. There are two modes, inline and popup, in which a single row in a Grid can be edited. The inline editing turns the cell into a text-input field and provides options to update the record. In the popup editing, a pop up that contains the same fields is shown, and it allows users to save the selected record.

In addition to editing rows in the Grid, the library also allows you to delete and add records to the Grid. These actions—Create, Read, Update, and Delete—are mapped to a remote service that can process these requests. A common paradigm used in web development is to provide a RESTful web service. A RESTful service provides a single endpoint URL and provides resources that get invoked based on the http method mentioned in the request.

How to do it…

To enable editing of rows in a Grid, set the editable attribute to either inline or popup:

editable: 'inline'  

This will enable the inline editing. The next step is to add Edit and Delete action buttons for each row. In the columns configuration, you can define commands that can be applied to each row in the Grid. There are two built-in commands, namely edit and delete.

The edit command enables the editing of the row by turning the fields in the row to input fields. The delete command, on the other hand, deletes the selected row using the following code snippet:

columns: [{
    field : 'movieName',
    title : 'Movie',
  }, {
    field : 'year',
    title : 'Year'
  },{
    field : 'rating',
    title : 'Rating'
  },{
    command: ['edit', 'destroy']
  }
]

Here, the columns configuration lists the various fields and mentions the edit and destroy commands. This will add the Edit and Delete buttons for each row in the Grid. These buttons should be bound to a remote service so that when the user updates or deletes a record, the service will update the same in the database. In earlier recipes, we looked at using the DataSource object with a transport attribute. Here, you can use the same attribute to specify the endpoint for each of the actions, as shown in the following code snippet:

dataSource: {
  transport: {
    read: '/test',
    create: {
      url: '/test',
      type: 'POST'
    },
    update: {
      url: '/test',
      type: 'PUT'
    },
    destroy: {
      url: '/test',
      type: 'DELETE'
    }
  },

  schema: {
    model: {
      id: "movieName",
      fields: {
        movieName: { type: "string" },
        year: { type: "number" },
        rating: { type: "number" }
      }
    }
  }
}

In the preceding code snippet, the transport object defines endpoint URLs for various actions, such as read, create, update, and delete. The create, update, and delete actions specify the endpoint URL as well as the http method to use when sending a request. The http method is required if you have a RESTful service that accepts the request and invokes the correct resource by examining the http method in the request. If this is not specified, then a GET request is sent by default.

How it works…

After setting the editable attribute to inline and adding its command configuration in columns, each row in the Grid has two buttons, that is, Edit and Delete, as shown in the following screenshot:

When you click on Edit, the selected row switches to the edit mode and text-input fields are shown.

After changing the values and clicking on Update, a PUT request is sent to the mentioned URL with the model data in the request body. Here, the user also has an option to cancel the operation. Similarly, when you click on the Delete button, an alert box asking the user to confirm the delete operation is shown. If the user clicks on OK, then a DELETE request is sent to the mentioned service and the corresponding row in the Grid is deleted. When you change the editable attribute to popup, a pop-up window is shown when you click on the Edit button.

There's more…

The Kendo UI Grid also allows the user to add records to the Grid. The Grid component can define a toolbar attribute whose value is an array that contains a set of action buttons to be shown. In this case, to add new records to the Grid, specify the value as create:

toolbar: ['create']

This will add a Add new record button at the top of the Grid, as shown in the following screenshot:

On clicking on the Add new record button, a row is added to the Grid.

This is the case when the editable attribute is set to inline. If the same is set to popup, then a pop-up window is shown. After clicking on Update, a POST request (refer to create in transport, shown in the last example in the How to do it… section) is sent to the service, mentioning the model data in the request body.