Custom tool bar in Vue Grid component

16 Mar 20234 minutes to read

Custom Toolbar is used to customize the whole toolbar. It can be added by defining
toolbarTemplate. Actions for this toolbar template items are defined in the
clicked event in toolbar.

<template>
    <div id="app">
        <ejs-grid ref='grid' id='Grid' :dataSource='data' :allowGrouping='true' :groupSettings='groupOptions' :toolbarTemplate='toolbar'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' isPrimaryKey='true' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' type='string' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' type='string' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' type='string' 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 { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
import { cdata } from './datasource.js';

Vue.use(GridPlugin);
Vue.use(ToolbarPlugin);

export default {
  data() {
    return {
      data: cdata,
      groupOptions: { columns: ['CustomerID'] },
      toolbar: function () {
        return {
          template: Vue.component('custom-toolbar', {
            template: `<ejs-toolbar :clicked='clickHandler'>
                        <e-items>
                            <e-item id='collapse' prefixIcon='e-collapse'></e-item>
                        </e-items>
                    </ejs-toolbar>`,
            data: function () {
              return {};
            },
            methods: {
              clickHandler(args) {
                let target = args.originalEvent.target.closest('button'); //find clicked button
                var gridInstance = document.getElementById("Grid").ej2_instances[0];
                if (target.id === 'collapse') {
                  //collapse all expanded grouped row
                  gridInstance.groupModule.collapseAll();
                }
              }
            }
          })
        };
      }
    };
  },
  provide: {
    grid: [Toolbar, Group]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
.e-icons.e-collapse::before {
  content: "\e834";
}
</style>