In part two of this guide, learn how to edit a Grid you've created with the new native Grid in Kendo UI for Vue.
In the last post, we saw how to initialize a Vue Native Grid with Kendo UI, using local and remote data. In this post, we will learn how to implement some of the editing features of the Vue Native Grid. Using the grid wrapper, you can enable editing by configuring the editable and toolbar properties and the component takes care of everything. But in this case we are limited to the default behavior. Using the native grid, we must implement the functionality ourselves to enable editing. This gives us more control over the behavior of the component and allows us to handle all possible interactions on the page. Up next, we will see how to add the ability to edit records inline and create new records.
Getting Started
First, we will initialize our project using the Vue webpack-simple template. Inside the project directory, we will install a theme, the grid, the globalization package, and the vue-class-component using the following commands:
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-vue-grid
npm install --save @progress/kendo-vue-intl
npm install --save vue-class-component
Next, we import the theme, the Grid and the GridToolbar in our main.js file. We need the GridToolbar component for the add new record functionality. Last, we register the Grid and GridToolbar globally. The following is the updated main.js file.
import Vue from 'vue'
import App from './App.vue'
import '@progress/kendo-theme-default/dist/all.css'
import { Grid, GridToolbar } from '@progress/kendo-vue-grid'
Vue.component('Grid', Grid)
Vue.component('grid-toolbar', GridToolbar)
new Vue({
el: '#app',
render: h => h(App)
})
In the App.vue file we will first add the Grid component to the template. In the component, we will set thedata-items,columns, andedit-fieldproperties and add therowclickanditemchange events. This is the template:
<template>
<div id="app">
<Grid :style="{height: '240px'}"
:data-items="getData"
:columns="columns"
:edit-field="'inEdit'"
@rowclick="rowClick"
@itemchange="itemChange">
</Grid>
</div>
</template>
We need the data-items and columns properties to construct the grid. The edit-field is used to determine if the current record is in edit mode. It is the name of a field in our data items and the value is either true or false. We chose the name inEdit, but our data items don’t have a field named inEdit so we will have to give it one. We will create a computed method called getData that assigns the property inEdit to all of the data items. The value of inEdit is true depending on if the editID equals the personId. The editID is the id of the item that is in edit mode. This is the script so far:
<script>
import Vue from 'vue';
var people = [
{
"personId": 0,
"name": "Ruxanda",
"surname": "Corbea",
"gender": "female",
"region": "Romania"
},
{
"personId": 1,
"name": "Paula",
"surname": "Acevedo",
"gender": "female",
"region": "Mexico"
},
{
"personId": 2,
"name": "David",
"surname": "Dediu",
"gender": "male",
"region": "Romania"
},
{
"personId": 3,
"name": "Urmila",
"surname": "Belbase",
"gender": "female",
"region": "Nepal"
}
];
export default {
name: 'app',
data () {
return {
gridData: people,
editID: null,
columns: [
{ field: 'personId', title: 'ID'},
{ field: 'name'},
{ field: 'surname'},
{ field: 'gender'},
{ field: 'region' }
],
};
},
computed: {
getData () {
return this.gridData.map((item) => Object.assign({inEdit: item.personId === this.editID}, item))
}
}
}
</script>
Editing Records
To enable editing, we need to handle the rowclick and itemchange events. The rowclick event fires when a user clicks a row. When this event is triggered, we want to put the record in edit mode. In our handler, we will set the editID equal to the personId so that inEdit becomes true. The itemchange event fires when the user changes the value of an item. We will use this event to save our changes. In the handler, first, we copy the data items. Then we find the index of the item being edited. We replace the item at that index with the new values. Last, we set our local data source equal to the new data. This is the rowclick and itemchange handlers:
export default {
...
methods: {
rowClick (e) {
this.editID = e.dataItem.personId;
},
itemChange (e) {
const data = this.gridData.slice();
const index = data.findIndex(d => d.personId === e.dataItem.personId);
data[index] = { ...data[index], [e.field]: e.value };
this.gridData = data;
}
}
}
Adding Records
Next, we will go over how to add new records. We will add a button to the toolbar. When clicked, a new row will be added to the beginning of the grid in edit mode. When the toolbar is clicked, the record will be taken out of edit mode. First, we will add the grid-toolbar template to our existing template. This is the updated Grid component:
<Grid :style="{height: '240px'}"
:data-items="getData"
:columns="columns"
:edit-field="'inEdit'"
@rowclick="rowClick"
@itemchange="itemChange">
<grid-toolbar>
<div @click="closeEdit">
<button title="Add new" class="k-button k-primary" @click='addRecord' >
Add new
</button>
</div>
</grid-toolbar>
</Grid>
Next, we will implement the addRecord and closeEdit click events and add them to our list of methods. For the addRecord method, we will first create a new record and initialize it with a personId field. Then we will copy the current data. Next, we add the new record to the beginning of copied data. Then we set our local data source equal to the updated data. Last, we put the record in edit mode by setting the editID equal to the personId. For the closeEdit method we make the editID equal to null so the record is no longer in edit mode. These are the two methods added to our script.
export default {
...
methods: {
...
addRecord () {
const newRecord = {personId: this.gridData.length}
const data = this.gridData.slice();
data.unshift(newRecord);
this.gridData = data;
this.editID = newRecord.personId;
},
closeEdit (e) {
if (e.target === e.currentTarget) {
this.editID = null;
}
}
}
}
See the final project repo here: https://github.com/albertaw/kendoui-vue-native-grid-editing
Summary
We saw how to edit data items and create new data items in the grid. There are many other ways we could have customized our grid. Items can be edited inline or in cell. In addition to adding and editing records, we could add the ability to delete records. Instead of clicking the toolbar to close editing, we could add buttons to save and cancel changes. We could also create an edit button to activate the edit mode. You can also use templates to create custom edit fields. These are just some of the features you can add.
Resources
Try out Kendo UI for Yourself
Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.
Angular, React, and jQuery Versions
Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for jQuery.
Top comments (0)