Tool bar in Vue Grid component

16 Mar 20237 minutes to read

The Grid provides ToolBar support to handle grid actions. The toolbar property accepts either the collection of built-in toolbar items and ItemModel objects for custom toolbar items or HTML element ID for toolbar template.

To use Toolbar, you need to inject Toolbar module in the provide section.

Enable or disable toolbar items

You can enable/disable toolbar items by using the enableItems method.

<template>
    <div id="app">
        <ejs-button id='enable' cssClass='e-flat' @click.native='enable'>Enable</ejs-button>
        <ejs-button id='disable' cssClass='e-flat' @click.native='disable'>Disable</ejs-button>
        <ejs-grid id='Grid' ref='grid' :dataSource='data' height='200px' :allowGrouping='true' :groupSettings='groupOptions' :toolbar='toolbar' :toolbarClick='clickHandler'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Group } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';

Vue.use(GridPlugin);
Vue.use(ButtonPlugin);

export default {
  data() {
    return {
      data: data,
      toolbar: ['Expand', 'Collapse'],
      groupOptions: { columns: ['CustomerID'] }
    };
  },
  methods: {
      clickHandler: function(args) {
        if (args.item.id === 'Grid_Collapse') { // Grid_Collapse is control id + '_' + toolbar value.
            this.$refs.grid.ej2Instances.groupModule.collapseAll();
        }

        if (args.item.id === "Grid_Expand"){
            this.$refs.grid.ej2Instances.groupModule.expandAll();
        }
    },
    enable: function() {
        this.$refs.grid.ej2Instances.toolbarModule.enableItems(['Grid_Collapse','Grid_Expand'],true);//Enable toolbar items.
    },
    disable: function() {
        this.$refs.grid.ej2Instances.toolbarModule.enableItems(['Grid_Collapse','Grid_Expand'],false);//Disable toolbar items.
    }
  },
  provide: {
      grid: [Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Add toolbar at the bottom of Grid

You can add the Grid toolbar component at the bottom of Grid using the ‘created’ event.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :toolbar='toolbar' :created='created' height='175px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width='120'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width='140'>
                </e-column>
                <e-column field='Freight' headerText='Freight' type='number' textAlign='Right' format='C2' width='120'></e-column>
                <e-column field='OrderDate' headerText='OrderDate' type='date' textAlign='Right' format='yMd' width='140'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar } from "@syncfusion/ej2-vue-grids";
import { tbdata } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: tbdata.slice(0, 8),
      toolbar: ['Print', 'Search'],
      orderIDRules: { required: true },
    };
  },
  methods: {
    created: function () {
      let toolbar = this.$refs.grid.ej2Instances.element.querySelector(".e-toolbar");
      this.$refs.grid.ej2Instances.element.appendChild(toolbar);
    }
  },
  provide: {
    grid: [Toolbar]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

See Also