GridToolbar

Copy Code  <div id="app">
      <Grid
          :data-items="products"
          :columns="columns">
      <grid-toolbar >
          <button title="Add new" class="k-button k-primary" @click='insert' >
                  Add new
          </button>
          <button v-if="hasItemsInEdit"
              title="Cancel current changes"
              class="k-button"
              @click="cancelChanges">
              Cancel current changes
          </button>
          </grid-toolbar>
      </Grid>
  </div>
<script>
      Vue.component('Grid', Grid);
      Vue.component('grid-toolbar', GridToolbar);
      new Vue({
          el: '#app',
          data: function () {
              return {
                 products: [
                   { 'foo': 'A1', 'bar': 'B1' },
                      { 'foo': 'A2', 'bar': 'B2' },
                      { 'foo': 'A3', 'bar': 'B2' }
                  ],
                  columns: [
                      { field: 'foo'},
                      { field: 'bar'}
                  ]
              };
          }
      });
  </script>