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
- 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;
});
}- Configure the method that will handle the
changesin 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');
}
});
},- Update the
save,removeandcancelChangesmethods 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.
You can find the implementation of the backend service used in the above examplehere.