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

Local data operations

The current example describes in detail how you can:

Bind the Grid to local data
Read, Create, Update and Delete records
Sort, Filter and Page Grid's data

In the current article you can go through the main implementation steps of the Local Data binding demo or directly test the ready example:

Implementation steps
Local Data binding CRUD, sort, filter and page operations demo

Implementation steps

The below description gives a broader perspective of what configurations must be applied to the Kendo UI for Vue Native Grid to activate the most used functionalities of the component.

Bind local data to the Grid

The Grid displays the data passed to its data-items property. The expected format of the passed data is array of text or Object values.

In the example you can see below, the data is defined as follows:

jsx

gridData: [
{
    ProductID: 1,
    ProductName: 'Chai',
    UnitsInStock: 39,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 8, 20),
},
{
    ProductID: 2,
    ProductName: 'Chang',
    UnitsInStock: 17,
    Discontinued: false,
    FirstOrderedOn: new Date(1996, 7, 12),
}
.....................

The gridData property in the current example is used in a computed property that is passed to the data-items prop of the Grid. More details about the mentioned computed property, you can find below.

Create, Update and Delete data

The complete example below implements a Grid with inline editing functionality. More about the different editing modes available in the Grid, you can find in our Grid Editing documentation.

To add new data items, edit or delete records, we need to add the below methods that handle the data changes.

jsx

itemChange: function (e) {
  const data = this.gridData.slice();
  const index = data.findIndex((d) => d.ProductID === e.dataItem.ProductID);
  data[index] = { ...data[index], [e.field]: e.value };
  this.gridData = data;
  if (event.dataItem) {
    event.dataItem[e.field] = e.value;
  }
},
rowClick: function (e) {
  this.gridData.map((item) => (item.inEdit = false));
  this.editID = e.dataItem.ProductID;
  e.dataItem.inEdit = true;
},
closeEdit(e) {
  if (e.target === e.currentTarget) {
    this.editID = null;
  }
},
addRecord() {
  const newRecord = { ProductID: this.gridData.length + 1 };
  const data = this.gridData.slice();
  data.unshift(newRecord);
  this.gridData = data;
  this.editID = newRecord.ProductID;
}

The addRecord and closeEdit methods are triggered from the Grid Toolbar using the below code:

jsx

<grid-toolbar>
  <div @click="closeEdit">
    <kbutton title="Add new" :theme-color="'primary'" @click="addRecord">
      Add new
    </kbutton>
  </div>
</grid-toolbar>

The rowClick and itemChange methods are executed when the rowClick and itemChange events are triggered.

Sort, Filter and Page Grid's data

To enable the data sorting in the Grid we have to define the sortable and sort properties together with the sortchange event.

jsx

:sortable="true"
:sort="sort"
@sortchange="sortChangeHandler"

To enable the data filtering in the Grid we have to define the filterable and filter properties together with the filterchange event.

jsx

:filterable="true"
:filter="filter"
@filterchange="filterChangeHandler"

To enable the data paging in the Grid we have to define the take and skip properties together with the pagechange event.

jsx

:take="take"
:skip="skip"
@pagechange="pageChangeHandler"

Define the values of the different properties and methods used by the Grid

Below is the definition of the data props related to the sorting, filtering and paging:

jsx

sort: null,
filter: null,
skip: 0,
take: 3,

Here is the definition of the methods used by Grid events that handle the data sorting, filtering and paging:

jsx

sortChangeHandler(event) {
  this.sort = event.sort;
},
filterChangeHandler(event) {
  this.filter = event.filter;
},
pageChangeHandler(event) {
  this.take = event.page.take;
  this.skip = event.page.skip;
}

The process method

The process method is part of the @progress/kendo-data-query package and plays important role in the data manipulations inside the Native Grid component.

The method transforms the Grid data based on the sort, filter, take and skip properties passed to it. Below is the way we use it in the context of our local data binding example. The result computed property is passed to the data-items of the Grid and have the value returned by the process method.

jsx

result: {
  get: function () {
    return process(this.gridData, {
      sort: this.sort,
      filter: this.filter,
      take: this.take,
      skip: this.skip,
    });
  },
}

Local Data binding CRUD, sort, filter and page operations demo

This example demonstrates how to perform multiple data operations in a Grid bound to local data.

Change Theme

Theme

Loading ...

Local data operations

Implementation steps

Local Data binding CRUD, sort, filter and page operations demo

Suggested Links