Custom toolbar in Vue Grid component
29 Mar 202424 minutes to read
Custom toolbar in Syncfusion Vue Grid allows you to create a distinctive toolbar layout, style, and functionality that aligns with the specific needs of your application, providing a personalized experience within the Grid component.
This can be achieved by utilizing the toolbarTemplate property, which offers extensive customization options for the toolbar. You can define a custom template for the toolbar and handle the actions of the toolbar items in the clicked event.
The following example demonstrates, how to render the custom toolbar using toolbarTemplate
<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' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' type='string' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' type='string' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' type='string' width=120></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 { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ToolbarPlugin);
export default {
data() {
return {
data: data,
groupOptions: { columns: ['CustomerID'] },
toolbar: function () {
return {
template: Vue.component('custom-toolbar', {
template: `<ejs-toolbar :clicked='clickHandler'>
<e-items>
<e-item id="collapse" text="Collapse All" prefixIcon="e-chevron-up icon"></e-item>
<e-item id="expand" text="Expand All" prefixIcon="e-chevron-down icon"></e-item>
</e-items>
</ejs-toolbar>`,
data: function () {
return {};
},
methods: {
clickHandler(args) {
let target = args.originalEvent.target.closest('button'); //find clicked button
var grid= document.getElementById("Grid").ej2_instances[0];
if (target.id === 'collapse') {
// collapse all expanded grouped row
grid.groupModule.collapseAll();
}
if (target.id === 'expand') {
// expand all collapsed grouped row
grid.groupModule.expandAll();
}
}
}
})
};
}
};
},
provide: {
grid: [Toolbar, Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.e-icons.e-collapse::before {
content: "\e834";
}
</style>Render image with text in custom toolbar
Render an image with text in custom toolbar in Syncfusion Vue Grid allows easily render an image along with text in the toolbar of the Grid. This feature enhances the visual presentation of the Grid, providing additional context and improving the overall experience.
To render an image with text in custom toolbar, This can be achieved by utilizing the toolbarTemplate property.
The following example demonstrates how to render an image in the toolbar of the grid using toolbarTemplate.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :editSettings='editSettings' :toolbarTemplate='toolbar'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' type='string' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' type='string' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' type='string' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { addImage } from "./add.ts";
import { deleteImage } from "./delete.ts";
import { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ToolbarPlugin);
Vue.use(ButtonPlugin);
export default {
data() {
return {
data: data,
orderIDRules: { required: true },
editSettings: { allowAdding: true, allowDeleting: true },
toolbar: function () {
var addImageSource = `data:image/png;base64, ${addImage}`;
var deleteImageSource = `data:image/png;base64, ${deleteImage}`;
return {
template: Vue.component('custom-toolbar', {
template: `<ejs-toolbar>
<div>
<img :src="addImageSource" id="addImage" />
<ejs-button ref='button' id="addButton" class="button" cssClass='e-outline' v-on:click.native="editAction">Add</ejs-button>
<img :src="deleteImageSource" id="deleteImage" />
<ejs-button ref='button' id="deleteButton" class="button" cssClass='e-outline' v-on:click.native="editAction">Delete</ejs-button>
</div>
</ejs-toolbar>`,
data: function () {
return {
addImageSource: addImageSource,
deleteImageSource: deleteImageSource
};
},
methods: {
editAction: function(args) {
var grid= document.getElementById("Grid").ej2_instances[0];
if (args.currentTarget.id === 'addButton') {
grid.addRecord();
} else {
var selectedRecord = grid.getSelectedRecords()[0];
grid.deleteRecord(selectedRecord);
}
}
}
})
};
}
};
},
provide: {
grid: [Toolbar, Edit]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.button {
margin: 0px 10px 3px;
}
#addImage,#deleteImage {
height: 30px;
width: 30px;
}
</style>You can further customize the styles and layout of the image and text in the custom toolbar to suit your specific design requirements.
Render DropDownList in custom toolbar
Render DropDownList in custom toolbar in Syncfusion Vue Grid enables you to extend the functionality of the custom toolbar by incorporating a DropDownList component, allowing you to perform various actions within the Grid based on their selections.
This can be achieved by utilizing the toolbarTemplate. The example below demonstrates how to render the DropDownList component in the custom toolbar, where the toolbar template includes the its change event is bound to the onChange method.
In the onChange method, the text of the selected item is checked to determine the appropriate action. For example, if Update is chosen, the endEdit method is called to exit the edit mode. If Edit is selected, the selected record is passed to the startEdit method to initiate the edit mode dynamically. Similarly, if Delete is picked, the selected record is passed to the deleteRecord method to remove it from the grid.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :editSettings='editSettings' :toolbarTemplate='toolbar'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' type='string' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' type='string' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' type='string' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ToolbarPlugin);
Vue.use(DropDownListPlugin);
export default {
data() {
return {
data: data,
orderIDRules: { required: true },
editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true },
toolbar: function () {
return {
template: Vue.component('custom-toolbar', {
template: `<ejs-toolbar>
<div style="display: inline-block;">
<label style="padding: 10px 10px 12px 0"> Change the value: </label>
<ejs-dropdownlist id='dropdownlist' :dataSource='dropDownData' :change="onChange" placeholder='Select a value' width="150"></ejs-dropdownlist>
</div>
</ejs-toolbar>`,
data: function () {
return {
dropDownData: [{ text: 'Edit' }, { text: 'Delete' }, { text: 'Update' }],
};
},
methods: {
onChange: function (args) {
var grid = document.getElementById("Grid").ej2_instances[0];
const selectedRow = grid.getSelectedRecords()[0];
if (args.itemData.text === 'Update') {
grid.endEdit();
}
if (args.itemData.text === 'Edit') {
grid.startEdit();
}
if (args.itemData.text === 'Delete') {
grid.deleteRecord(selectedRow);
}
this.$refs.dropDown.$el.value = '';
this.$refs.dropDown.$el.placeholder = args.itemData.text;
}
}
})
};
}
};
},
provide: {
grid: [Toolbar, Edit]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.button {
margin: 0px 10px 3px;
}
#addImage, #deleteImage {
height: 30px;
width: 30px;
}
</style>Render a component or element using the toolbar template
Rendering a component or element using the toolbar template in the Syncfusion Vue Grid allows you to extend the capabilities of the grid toolbar by incorporating custom components or elements. This provides flexibility to enhance the toolbar with custom buttons, dropdowns, input fields, icons, or any other desired UI elements. You can bind event handlers or handle interactions within the template to enable specific actions or behaviors associated with the added components or elements.
To render custom components or elements within the toolbar, use the toolbarTemplate. This allows you to include other components, such as a Button, and perform specific grid actions based on the button click. For example, when the ExcelExport button is clicked, the excelExport method is called to export the grid to Excel. Similarly, when the PdfExport button is clicked, the pdfExport method is called to export the grid to PDF format.Likewise, when the Print button is clicked, the print method will triggered to print the grid.
The following example demonstrates how to render a Button component in the toolbar using toolbarTemplate and perform grid action based on the respected button click.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :allowExcelExport='true' :allowPdfExport='true' :toolbarTemplate='toolbar'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' type='string' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' type='string' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' type='string' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, PdfExport, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ToolbarPlugin);
Vue.use(ButtonPlugin);
export default {
data() {
return {
data: data,
toolbar: function () {
return {
template: Vue.component('custom-toolbar', {
template: `<ejs-toolbar>
<div>
<ejs-button id="excelButton" cssClass='e-outline' v-on:click.native="exportAction">Excel Export</ejs-button>
<ejs-button id="pdfButton" cssClass='e-outline' v-on:click.native="exportAction">Pdf Export</ejs-button>
<ejs-button id="printButton" cssClass='e-outline' v-on:click.native="exportAction">Print</ejs-button>
</div>
</ejs-toolbar>`,
data: function () {
return {};
},
methods: {
exportAction: function (args) {
var grid = document.getElementById("Grid").ej2_instances[0];
if (args.currentTarget.id === 'excelButton') {
grid.excelExport();
}
else if (args.currentTarget.id === 'pdfButton') {
grid.pdfExport();
}
else {
grid.print();
}
}
}
})
};
}
};
},
provide: {
grid: [Toolbar, PdfExport, ExcelExport]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
#pdfButton,#printButton {
margin-left: 5px;
}
#toolbar{
margin-bottom: 5px;
}
</style>