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 should be applied to the Native Grid to activate the most widely used functionalities of the component.

1. 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:

Copy CodegridData: [
{
    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.

2. 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 be able to add new data items, edit or delete records, we need to add the below methods that handle the data changes.

Copy CodeitemChange: 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:

Copy Code<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.

3. 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.

Copy Code: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.

Copy Code: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.

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

4. 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:

Copy Codesort: 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:

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

5. 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.

Copy Coderesult: {
  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

The below example demonstrates how we can perform multiple data operations in a Grid that is bound to local data.

Suggested Links

• Grid Remote data operations
• Grid CRUD operations with OData v4
• API Reference of the Grid
• API Index of the Grid