New to Kendo UI for Vue? Start a free 30-day trial

OData CRUD operations with remote data binding

The Kendo UI for Vue Native Grid can display data from different types of sources, including the OData protocol. The below example demonstrates how we can implement CRUD operations in the Native Grid, using OData v4.

In the current article you can go through the main implementation steps of the OData CRUD demo or directly test the ready example:

Implementation steps

  1. Add editing functionality to the Native Grid. For details how to add editing functionality to the Native Grid, please refer to this Inline Editing documentation article. Use the linked example as a starting point for the implementation of the functionality.
  2. Configure the Read data functionality with an implementation like this:
getData: function (initial) {
  const that = this;
  fetch(
    this.baseUrl + '?' + toODataString(this.dataState) + '&$count=true',
    this.init
  )
    .then((response) => response.json())
    .then((json) => {
      const total = json['@odata.count'];
      const data = json['value'];
      that.total = total;
      that.updatedData = [...data];
      that.gridData = data;
    });
}
  1. Configure the method that will handle the changes in the remote data:
updateService(action = '', item) {
  const that = this;
  const idIfNeeded =
    action === 'DELETE' || action === 'PUT' ? `(${item.ProductID})` : '';
  const url = this.baseUrl + idIfNeeded;
  const body =
    action === 'POST' || action === 'PUT'
      ? JSON.stringify({
          ProductID: item.ProductID,
          ProductName: item.ProductName,
          QuantityPerUnit: item.QuantityPerUnit,
          Discontinued: item.Discontinued,
          UnitPrice: item.UnitPrice,
          UnitsInStock: item.UnitsInStock,
        })
      : {};
  fetch(url, {
    method: action,
    accept: 'application/json',
    headers: {
      'Content-type': 'application/json',
    },
    body: body,
  }).then((response) => {
    if (response.ok) {
      that.getData();
    } else {
      alert('request failed');
    }
  });
},
  1. Update the save, remove and cancelChanges methods as follows:
save: function (e) {
    let index = this.gridData.findIndex(
    (p) => p.ProductID === e.dataItem.ProductID
    );
    let item = this.gridData[index];
    this.updateService(item.ProductID ? 'PUT' : 'POST', item);
},
remove(e) {
    e.dataItem.inEdit = undefined;
    this.updateService('DELETE', e.dataItem);
},
cancelChanges() {
    this.getData();
},

OData CRUD operations demo

The following example demonstrates we can read, create, update and delete remote data using the Grid component and the OData v4 protocol.

Example
View Source
Change Theme:

The implementation of the backend service used in the above example can be found here.