# OData CRUD operations with remote data binding

The Kendo UI for Vue 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 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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/data-binding/odata-binding#implementation-steps)
* [OData CRUD operations ready for test demo](https://www.telerik.com/kendo-vue-ui-develop/components/grid/data-binding/odata-binding#odata-crud-operations-demo)

## Implementation steps

1. Add editing functionality to the Grid.

For details how to add editing functionality to the Grid, please refer to [this Inline Editing documentation](https://www.telerik.com/kendo-vue-ui-develop/components/grid/editing/editing-inline) 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:

```jsx
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;
    });
}
```

3. Configure the method that will handle the `changes` in the remote data:

```jsx
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');
    }
  });
},
```

4. Update the `save`, `remove` and `cancelChanges` methods as follows:

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/data-binding/odata4-crud/source.txt)

> You can find the implementation of the backend service used in the above example[here](https://github.com/telerik/kendo-ui-demos-service/tree/master/odata-v4).

## Suggested Links

* [Grid Local data operations](https://www.telerik.com/kendo-vue-ui-develop/components/grid/data-binding/local-data-binding)
* [Grid Remote data operations](https://www.telerik.com/kendo-vue-ui-develop/components/grid/data-binding/remote-data-binding)
* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)