How to Use a Vue Grid UI Component in Your Web App (Part 2)
Tags: javascript, vue, datagrid
Published: 2019-02-14 07:45:30

---
title: How to Use a Vue Grid UI Component in Your Web App (Part 2)
published: true
tags: javascript, vue, datagrid 
canonical_url: https://www.telerik.com/blogs/how-to-use-a-vue-grid-ui-component-in-your-web-app-part-2
---

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](https://dev.to/progresstelerik/how-to-use-a-vue-grid-ui-component-in-your-web-app-part-1-3fcc-temp-slug-500595), we saw how to initialize a [Vue Native Grid](https://www.telerik.com/kendo-vue-ui/components/grid-native/) with [Kendo UI](https://www.telerik.com/kendo-vue-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](https://github.com/vuejs-templates/webpack-simple). 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 the`data-items`,`columns`, and`edit-field`properties and add the`rowclick`and`itemchange` 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>

```

## ![Grid](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/54grid01eb23c26bd0e6414ebfea1472d33ab313.png?sfvrsn=fefac6dc_1 "54Grid01")  
  
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;
    }
  }
}

```

## ![Grid](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/55grid02.png?sfvrsn=e582fdb4_1 "55Grid02")  
  
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;
      }
    }
  }
}

```

![Grid](https://d585tldpucybw.cloudfront.net/sfimages/default-source/default-album/55grid03.png?sfvrsn=9f0b85b0_1 "55Grid03")  
  
See the final project repo here: [https://github.com/albertaw/kendoui-vue-native-grid-editing](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

- [Project Repo](https://github.com/albertaw/kendoui-vue-native-grid-editing)
- [Vue Grid Native Overview](https://www.telerik.com/kendo-vue-ui/components/grid-native/)
- [Vue Grid Native Editing Basics](https://www.telerik.com/kendo-vue-ui/components/grid-native/editing/editing/)
- [Vue Grid Native API](https://www.telerik.com/kendo-vue-ui/components/grid-native/api/)

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

[Start My Kendo UI Trial](https://www.telerik.com/download-login-v2-kendoui?ReturnUrl=https://www.telerik.com/download-login-v2-kendoui/thank-you-for-downloading)

## Angular, React, and jQuery Versions

Looking for UI component to support specific frameworks? Check out [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/), [Kendo UI for React](https://www.telerik.com/kendo-react-ui/components/), or [Kendo UI for jQuery](https://www.telerik.com/kendo-jquery-ui/).

## More Resources

- [Kendo UI Vue Docs and Demos](https://www.telerik.com/kendo-vue-ui/components/)
- [Vue.js Webpack-Simple Template](https://github.com/vuejs-templates/webpack-simple)
- [Kendo UI Online Editor](https://dojo.telerik.com/)