Contents
- Show spinner while exporting
- Binding custom data source while exporting
- Exporting with custom aggregate
- Exporting with cell and row spanning
- Exporting with custom date format
- Merge duplicate cells in specific column and export in Grid
- Exporting multiple grids
- Exporting hierarchy grid
- Remove header row while exporting
- How to add formula for the cell while exporting
- Passing additional parameters to the server when exporting
- Limitations
- See Also
Excel exporting in Vue Grid component
7 May 202524 minutes to read
The Excel or CSV exporting feature in the Vue Grid component allows you to export the Grid data to an Excel or CSV document. This can be useful when you need to share or analyze the data in a spreadsheet format.
To enable Excel export in the Grid component, you need to set the allowExcelExport property to true. This property is responsible for enabling the Excel or CSV export option in the Grid.
To initiate the excel export process, you need to use the excelExport method provided by the Grid component. This method is responsible for exporting the Grid data to an Excel document.
To use the Excel or CSV export feature, you need to inject the ExcelExport module in the provide section. This allows the Grid component to access the necessary services for exporting data to Excel or CSV.
To initiate the CSV export process, you need to use the csvExport method provided by the Grid component. This method is responsible for exporting the Grid data to an CSV document.
The following example demonstrates how to perform a Excel or CSV export action in the grid:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport', 'CsvExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
grid.value.excelExport();
}
else if (args.item.id === 'Grid_csvexport') { // 'Grid_csvexport' -> Grid component id + _ + toolbar item name
grid.value.csvExport();
}
}
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport', 'CsvExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
else if (args.item.id === 'Grid_csvexport') { // 'Grid_csvexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.csvExport();
}
}
},
provide: {
grid: [Toolbar, 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";
</style>Show spinner while exporting
Showing a spinner while exporting in the Grid enhances the experience by displaying a spinner during the export process. This feature provides a visual indication of the export progress, improving the understanding of the exporting process.
To show or hide a spinner while exporting the grid, you can utilize the showSpinner and hideSpinner methods provided by the Grid within the toolbarClick event.
The toolbarClick event is triggered when a toolbar item in the Grid is clicked. Within the event handler, the code checks if the clicked item is related with Excel or CSV export, specifically the Grid_excelexport or Grid_csvexport item. If a match is found, the showSpinner method is used on the Grid instance to display the spinner.
To hide the spinner after the exporting is completed, bind the excelExportComplete event and use the hideSpinner method on the Grid instance to hide the spinner.
The following example demonstrates how to show and hide the spinner during Excel export in a grid.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width='90'></e-column>
<e-column field='ProductName' headerText='Product Name' width='100'> </e-column>
<e-column field='ProductID' headerText='Product ID' textAlign='Right' width='80'></e-column>
<e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
grid.value.showSpinner();
grid.value.excelExport();
}
};
const excelExportComplete = function () {
grid.value.hideSpinner();
};
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width='90'></e-column>
<e-column field='ProductName' headerText='Product Name' width='100'> </e-column>
<e-column field='ProductID' headerText='Product ID' textAlign='Right' width='80'></e-column>
<e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') {
this.$refs.grid.showSpinner();
this.$refs.grid.excelExport();
}
},
excelExportComplete() {
this.$refs.grid.hideSpinner();
}
},
provide: {
grid: [Toolbar, 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";
</style>Binding custom data source while exporting
The Grid component provides a convenient way to export data to a Excel or CSV format. With the Excel or CSV export feature, you can define a custom data source while exporting. This allows you to export data that is not necessarily bind to the grid, which can be generated or retrieved based on your application logic.
To export data, you need to define the dataSource property within the excelExportProperties object. This property represents the data source that will be used for the Excel or CSV export.
The following example demonstrates how to render custom dataSource during Excel export. By calling the excelExport method and passing the excelExportProperties object through the grid instance, the grid data will be exported to a Excel using the dynamically defined data source.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, changedData } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties = {
dataSource: changedData
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, changedData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties = {
dataSource: changedData
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, 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";
</style>Exporting with custom aggregate
Exporting grid data with custom aggregates allows you to include additional calculated values in the exported file based on specific requirements. This feature is highly valuable for providing a comprehensive view of the data in the exported file, incorporating specific aggregated information for analysis or reporting purposes.
In order to utilize custom aggregation, you need to specify the type property as Custom and provide the custom aggregate function in the customAggregate property.
Within the customAggregateFn function, it takes an input data that contains a result property. The function calculates the count of objects in this data where the ShipCountry field value is equal to Brazil and returns the count with a descriptive label.
The following example shows how to export the grid with a custom aggregate that shows the calculation of the Brazil count of the ShipCountry column.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column columnName="ShipCountry" type="Custom" :customAggregate="customAggregateFn" :footerTemplate='footerTemplate'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref, createApp } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, AggregateDirective as EAggregate, AggregatesDirective as EAggregates, Aggregate, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
var app = createApp();
const footerTemp = function () {
return {
template: app.component('footerTemplate', {
template: `<span>{{data.Custom}}</span>`,
data() { return { data: {} }; }
})
}
}
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
grid.value.excelExport();
}
};
const customAggregateFn = function (data) {
const brazilCount = data.result ? data.result.filter((item) => item['ShipCountry'] === 'Brazil').length
: data.filter((item) => item['ShipCountry'] === 'Brazil').length;
return `Brazil count: ${brazilCount}`;
}
provide('grid', [Toolbar, ExcelExport, Aggregate]);
</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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column columnName="ShipCountry" type="Custom" :customAggregate="customAggregateFn" :footerTemplate='footerTemplate'></e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, AggregateDirective, AggregatesDirective, Toolbar, ExcelExport, Aggregate } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { createApp } from "vue";
var app = createApp();
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"e-aggregates":AggregatesDirective,
"e-aggregate":AggregateDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport'],
footerTemplate: function () {
return {
template: app.component('footerTemplate', {
template: `<span> {{data.Custom}} </span>`,
data() { return { data: {} }; }
})
}
}
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
},
customAggregateFn: function (data) {
const brazilCount = data.result ? data.result.filter((item) => item['ShipCountry'] === 'Brazil').length
: data.filter((item) => item['ShipCountry'] === 'Brazil').length;
return `Brazil count: ${brazilCount}`;
}
},
provide: {
grid: [Toolbar, ExcelExport, Aggregate]
}
}
</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";
</style>Exporting with cell and row spanning
Exporting data from the Grid with cell and row spanning enables you to maintain cell and row layout in the exported data. This feature is useful when you have merged cells or rows in the Grid and you want to maintain the same structure in the exported file.
To achieve this, you can utilize the rowSpan and colSpan properties in the queryCellInfo event of the Grid. This event allows you to define the span values for specific cells. Additionally, you can customize the appearance of the grid cells during the export using the excelQueryCellInfo event of the Grid.
The following example demonstrates how to perform export with cell and row spanning using queryCellInfo and excelQueryCellInfo events of the Grid.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick' :excelQueryCellInfo='excelQueryCellInfo' :queryCellInfo='queryCellInfo'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='Freight' headerText='Freight' width=80></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
grid.value.excelExport();
}
};
const queryCellInfo= function(args) {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
};
const excelQueryCellInfo = function(args) {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.cell.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.cell.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
};
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick' :excelQueryCellInfo='excelQueryCellInfo' :queryCellInfo='queryCellInfo'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='Freight' headerText='Freight' width=80></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport'],
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
},
queryCellInfo(args) {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
},
excelQueryCellInfo(args) {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.cell.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.cell.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
}
},
provide: {
grid: [Toolbar, 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";
</style>The updateCell method does not support row and column spanning.
Exporting with custom date format
The exporting functionality in the Syncfusion® Vue Grid allows you to export grid data, including custom date format. This feature is useful when you need to export grid data with customized date values.
To apply a custom date format to grid columns during the export, you can utilize the columns.format property. This property allows you to define a custom format using format options.
The following example demonstrates how to export the grid with custom date format. In the example, the formatOptions object is used as the format property for the OrderDate column. This custom date format displays the date in the format of day-of-the-week, month abbreviation, day, and 2-digit year (e.g., Sun, May 8, 23).
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' :format="formatOption" textAlign='Right'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const formatOption = { type: 'date', format: "ccc, LLL d, yy" }
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
grid.value.excelExport();
}
};
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' :format="formatOption" textAlign='Right'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport'],
formatOption: { type: 'date', format: "ccc, LLL d, yy" }
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
}
},
provide: {
grid: [Toolbar, 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";
</style>Merge duplicate cells in specific column and export in Grid
You can merge duplicate cells (based on their values) in a specific column of the Syncfusion® Grid. This can be achieved by utilizing the dataBound event. Additionally, you can merge duplicate cells in the specified column during export by using the excelQueryCellInfo event for Excel and CSV formats. This functionality is useful for improving the readability of your data and providing a clearer visual representation.
Here’s an example demonstrating how to merge duplicate cells in the OrderID column in both Grid view and export:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' height='220px' :dataSource='data' :toolbar='toolbarOptions'
:allowExcelExport='true' :toolbarClick='toolbarClick' :dataBound="onDataBound"
:excelQueryCellInfo="excelQueryCellInfo" :excelExportComplete="excelExportComplete">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='City' headerText='Ship City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const gridcells= ref("");
const currentOrderID=ref(null);
const rowspanCount= ref(1)
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') {
grid.value.excelExport();
}
};
const onDataBound= function() {
let previousData= null;
let startRowIndex = null;
let endRowIndex= null;
let rows = grid.value.ej2Instances.getRows();
let data = grid.value.ej2Instances.getCurrentViewRecords();
for (let i = 0, len = rows.length; i < len; i++) {
if (!previousData) {
previousData = data[i]['OrderID'];
startRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"));
}
else if (previousData === data[i]['OrderID']) {
rows[i].children[0].classList.add('e-hide');
}
else if (previousData && previousData !== data[i]['OrderID']) {
if (grid.value.ej2Instances.getRows().length > 0 && grid.value.ej2Instances.getRows().length > startRowIndex) {
endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
let targetRow = grid.value.ej2Instances.getRows()[startRowIndex];
let currentRowChild = rows[i] && rows[i].children[0];
if (targetRow && currentRowChild) {
let targetCell = [].slice.call(targetRow.querySelectorAll('.e-rowcell')).filter((cell) =>
parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(currentRowChild.getAttribute('aria-colindex'))
);
if (targetCell[0]) {
targetCell[0].setAttribute("rowSpan", endRowIndex - startRowIndex);
}
}
previousData = data[i]['OrderID'];
startRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
}
}
if (rows[i].children[0].classList.contains("e-hide") || i < len) {
endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
if (endRowIndex > 0) {
let targetRow = grid.value.ej2Instances.getRows()[startRowIndex];
let currentRowChild = rows[i] && rows[i].children[0];
if (targetRow && currentRowChild) {
let targetCell = [].slice.call(targetRow.querySelectorAll('.e-rowcell')).filter((cell) =>
parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(currentRowChild.getAttribute('aria-colindex'))
);
if (targetCell.length > 0) {
targetCell[0].setAttribute("rowSpan", endRowIndex - startRowIndex + 1);
}
}
}
}
}
};
const excelQueryCellInfo = function(args) {
if (!currentOrderID.value && args.column.field == "OrderID") {
currentOrderID.value = args.data["OrderID"];
gridcells.value = args.cell;
}
else if (currentOrderID.value && args.column.field == "OrderID" && currentOrderID.value == args.data["OrderID"]) {
rowspanCount.value++;
} else if (currentOrderID.value !== args.data["OrderID"] && args.column.field == "OrderID") {
gridcells.value.rowSpan = rowspanCount.value;
currentOrderID.value = args.data["OrderID"];
gridcells.value = args.cell;
rowspanCount.value = 1;
}
};
const excelExportComplete=function() {
currentOrderID.value = null;
gridcells.value = null;
i.value=1;
}
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' height='220px' :dataSource='data' :toolbar='toolbarOptions'
:allowExcelExport='true' :toolbarClick='toolbarClick' :dataBound="onDataBound"
:excelQueryCellInfo="excelQueryCellInfo" :excelExportComplete="excelExportComplete">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='City' headerText='Ship City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport'],
gridcells:"",
currentOrderID:null,
rowspanCount:1
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
},
onDataBound: function() {
let previousData= null;
let startRowIndex = null;
let endRowIndex= null;
let grid = this.$refs.grid.ej2Instances;
let rows = grid.getRows();
let data = grid.getCurrentViewRecords();
for (let i = 0, len = rows.length; i < len; i++) {
if (!previousData) {
previousData = data[i]['OrderID'];
startRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"));
}
else if (previousData === data[i]['OrderID']) {
rows[i].children[0].classList.add('e-hide');
}
else if (previousData && previousData !== data[i]['OrderID']) {
if (grid.getRows().length > 0 && grid.getRows().length > startRowIndex) {
endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
let targetRow = grid.getRows()[startRowIndex];
let currentRowChild = rows[i] && rows[i].children[0];
if (targetRow && currentRowChild) {
let targetCell = [].slice.call(targetRow.querySelectorAll('.e-rowcell')).filter((cell) =>
parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(currentRowChild.getAttribute('aria-colindex'))
);
if (targetCell[0]) {
targetCell[0].setAttribute("rowSpan", endRowIndex - startRowIndex);
}
}
previousData = data[i]['OrderID'];
startRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
}
}
if (rows[i].children[0].classList.contains("e-hide") || i < len) {
endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10);
if (endRowIndex > 0) {
let targetRow = grid.getRows()[startRowIndex];
let currentRowChild = rows[i] && rows[i].children[0];
if (targetRow && currentRowChild) {
let targetCell = [].slice.call(targetRow.querySelectorAll('.e-rowcell')).filter((cell) =>
parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(currentRowChild.getAttribute('aria-colindex'))
);
if (targetCell.length > 0) {
targetCell[0].setAttribute("rowSpan", endRowIndex - startRowIndex + 1);
}
}
}
}
}
},
excelQueryCellInfo(args) {
if (!this.currentOrderID && args.column.field == "OrderID") {
this.currentOrderID = args.data["OrderID"];
this.gridcells = args.cell;
}
else if (this.currentOrderID && args.column.field == "OrderID" && this.currentOrderID == args.data["OrderID"]) {
this.rowspanCount++;
} else if (this.currentOrderID !== args.data["OrderID"] && args.column.field == "OrderID") {
this.gridcells.rowSpan = this.rowspanCount;
this.currentOrderID = args.data["OrderID"];
this.gridcells = args.cell;
this.rowspanCount= 1;
}
},
// Reset the excel export global variable values
excelExportComplete() {
this.currentOrderID = null;
this.gridcells = null;
this.rowspanCount=1;
}
},
provide: {
grid: [Toolbar, 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";
</style>Exporting multiple grids
Exporting multiple grids in the Syncfusion® Vue Grid component allows you to export different grids to compare them side by side in external applications on the same or different pages of a Excel. Each grid is identified by its unique ID. You can specify which grid to export by listing their IDs in the exportGrids property.
Same sheet
Excel exporting provides support for exporting multiple grids on the same page. This feature is particularly useful when you want to combine and organize data from different grids for a unified view in the exported Excel file.
To achieve this, you need to define the multipleExport.type property as AppendToSheet in the excelExportProperties object. This setting ensures that the data from each grid will be appended to the same Excel sheet.
Additionally, you have an option to include blank rows between the data of each grid to visually separate them in the exported Excel sheet. The number of blank rows to be inserted can be defined using the multipleExport.blankRows property.
The following example demonstrates how to export multiple grids to the same page in a Excel file when a toolbar item is clicked.
<template>
<div id="app">
<p><b>First Grid:</b></p>
<ejs-grid ref='firstGrid' id='FirstGrid' :dataSource='firstData' :toolbar='toolbarOptions' :allowExcelExport='true' :exportGrids='exportGrids' :toolbarClick='toolbarClick'>
<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>
<p><b>Second Grid:</b></p>
<ejs-grid ref='secondGrid' id='SecondGrid' :dataSource='secondData' :allowExcelExport='true'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
const firstGrid = ref(null);
const firstData = data;
const secondData = employeeData;
const toolbarOptions = ['ExcelExport'];
const exportGrids = ['FirstGrid', 'SecondGrid'];
const toolbarClick = function (args) {
if (args.item.id === 'FirstGrid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let appendExcelExportProperties = {
multipleExport: { type: 'AppendToSheet', blankRows: 2 }
};
firstGrid.value.excelExport(appendExcelExportProperties, true);
}
}
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<p><b>First Grid:</b></p>
<ejs-grid ref='firstGrid' id='FirstGrid' :dataSource='firstData' :toolbar='toolbarOptions'
:allowExcelExport='true' :exportGrids='exportGrids' :toolbarClick='toolbarClick'>
<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>
<p><b>Second Grid:</b></p>
<ejs-grid ref='secondGrid' id='SecondGrid' :dataSource='secondData' :allowExcelExport='true'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
firstData: data,
secondData: employeeData,
toolbarOptions: ['ExcelExport'],
exportGrids: ['FirstGrid', 'SecondGrid'],
};
},
methods: {
toolbarClick: function (args) {
if (args.item.id === 'FirstGrid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let appendExcelExportProperties = {
multipleExport: { type: 'AppendToSheet', blankRows: 2 }
};
this.$refs.firstGrid.excelExport(appendExcelExportProperties, true);
}
}
},
provide: {
grid: [Toolbar, 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";
</style>By default, multipleExport.blankRows value is 5.
New sheet
Excel export functionality enables the exporting of multiple grids into separate pages (each grid on a new page) within the Excel file.
To achieve this, you can follow these steps:
-
Access the excelExportProperties of the Grid component.
-
Set the multipleExport.type to NewPage.
-
Trigger the Excel export operation.
The following example demonstrates how to export multiple grids to a Excel file when a toolbar item is clicked.
<template>
<div id="app">
<p><b>First Grid:</b></p>
<ejs-grid ref='firstGrid' id='FirstGrid' :dataSource='firstData' :toolbar='toolbarOptions' :allowExcelExport='true' :exportGrids='exportGrids' :toolbarClick='toolbarClick'>
<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>
<p><b>Second Grid:</b></p>
<ejs-grid ref='secondGrid' id='SecondGrid' :dataSource='secondData' :allowExcelExport='true'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
const firstGrid = ref(null);
const firstData = data;
const secondData = employeeData;
const toolbarOptions = ['ExcelExport'];
const exportGrids = ['FirstGrid', 'SecondGrid'];
const toolbarClick = function (args) {
if (args.item.id === 'FirstGrid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let appendExcelExportProperties = {
multipleExport: { type: 'NewSheet' }
};
firstGrid.value.excelExport(appendExcelExportProperties, true);
}
}
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<p><b>First Grid:</b></p>
<ejs-grid ref='firstGrid' id='FirstGrid' :dataSource='firstData' :toolbar='toolbarOptions'
:allowExcelExport='true' :exportGrids='exportGrids' :toolbarClick='toolbarClick'>
<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>
<p><b>Second Grid:</b></p>
<ejs-grid ref='secondGrid' id='SecondGrid' :dataSource='secondData' :allowExcelExport='true'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
firstData: data,
secondData: employeeData,
toolbarOptions: ['ExcelExport'],
exportGrids: ['FirstGrid', 'SecondGrid'],
};
},
methods: {
toolbarClick: function (args) {
if (args.item.id === 'FirstGrid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let appendExcelExportProperties = {
multipleExport: { type: 'NewSheet' }
};
this.$refs.firstGrid.excelExport(appendExcelExportProperties, true);
}
}
},
provide: {
grid: [Toolbar, 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";
</style>Limitations
- Multiple grids exporting feature is not supported with server side exporting.
Exporting hierarchy grid
Exporting a hierarchy grid in the Syncfusion® Vue Grid component allows you to generate a Excel or CSV document that includes the parent grid along with its child grids. This feature is useful when you need to export hierarchical data with its related details.
To achieve this, you can customize the exporting behavior by using the ExcelExportProperties.hierarchyExportMode property of the Grid. This property allows you to specify the exporting behavior for the hierarchy grid. The following options are available:
| Mode | Behavior |
|---|---|
| Expanded | Exports the master grid with expanded child grids. |
| All | Exports the master grid with all child grids, expanded or not. |
| None | Exports only the master grid without any child grids. |
The following example demonstrates how to export hierarchical grid to Excel document. Also change the excelExportProperties.hierarchyExportMode property by using value property of the DropDownList component:
<template>
<div id="app">
<div style="display: inline-block;">
<label style="padding: 10px 10px 12px 0"> Change the hierarchy export mode: </label>
<ejs-dropdownlist ref='dropdown' id='dropdownlist' index="0" width="150" :dataSource="ddlData" :fields='fields'></ejs-dropdownlist>
</div>
<ejs-grid ref='grid' id='Grid' :dataSource='parentData' :childGrid='childGrid' :toolbar='["ExcelExport"]'
:toolbarClick='toolbarClick' :allowExcelExport='true' style="margin-top: 10px">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, DetailRow, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { data, employeeData } from './datasource.js';
const grid = ref(null);
const dropdown = ref(null);
const parentData = employeeData;
const fields = { text: 'text', value: 'value' };
const ddlData = [
{ text: 'Expanded', value: 'Expanded' },
{ text: 'All', value: 'All' },
{ text: 'None', value: 'None' }
];
const childGrid = {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
};
const toolbarClick = function( args) {
if (args.item.id === 'Grid_excelexport') {
var exportProperties = {
hierarchyExportMode: dropdown.value.$el.value,
};
grid.value.excelExport(exportProperties);
}
}
provide('grid', [DetailRow, Toolbar, 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";
</style><template>
<div id="app">
<div style="display: inline-block;">
<label style="padding: 10px 10px 12px 0"> Change the hierarchy export mode: </label>
<ejs-dropdownlist ref='dropdown' id='dropdownlist' index="0" width="150" :dataSource="ddlData" :fields='fields'></ejs-dropdownlist>
</div>
<ejs-grid ref='grid' id='Grid' :dataSource='parentData' :childGrid='childGrid' :toolbar='["ExcelExport"]'
:toolbarClick='toolbarClick' :allowExcelExport='true' style="margin-top: 10px">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, DetailRow, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { data, employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-dropdownlist":DropDownListComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
parentData: employeeData,
fields: { text: 'text', value: 'value' },
ddlData: [
{ text: 'Expanded', value: 'Expanded' },
{ text: 'All', value: 'All' },
{ text: 'None', value: 'None' }
],
childGrid: {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
}
}
},
methods: {
toolbarClick: function( args) {
if (args.item.id === 'Grid_excelexport') {
let exportProperties = {
hierarchyExportMode: this.$refs.dropdown.$el.value,
};
this.$refs.grid.excelExport(exportProperties);
}
}
},
provide: {
grid: [DetailRow, Toolbar, 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";
</style>Format the child Grid columns before exporting
The Syncfusion® Vue Grid allows customization of the child Grid’s Excel export options, enabling precise control over data formatting before export. This functionality is achieved using the exportDetailDataBound event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the Excel document.
In the following example, the exportDetailDataBound event is used to modify the OrderDate column of the child Grid. By setting the column’s format property, the date values are formatted as dd/MM/yyyy when exported to Excel document.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='parentData' :childGrid='childGrid' :toolbar='["ExcelExport"]' :toolbarClick='toolbarClick' :allowExcelExport='true' :exportDetailDataBound="exportDetailDataBound">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, DetailRow, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
const grid = ref(null);
const parentData = employeeData;
const childGrid = {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 120, type: 'date', format: { type: 'date', format: 'dd-MM-yyyy' }},
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
};
const exportDetailDataBound = (args) => {
args.childGrid.columns[2].format = {type: 'date',format: 'dd\\/MM\\/yyyy'};
};
const toolbarClick = function( args) {
if (args.item.id === 'Grid_excelexport') {
var exportProperties = {
hierarchyExportMode: 'All',
};
grid.value.excelExport(exportProperties);
}
}
provide('grid', [DetailRow, Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='parentData' :childGrid='childGrid' :toolbar='["ExcelExport"]' :toolbarClick='toolbarClick' :allowExcelExport='true' :exportDetailDataBound="exportDetailDataBound">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, DetailRow, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
parentData: employeeData,
childGrid: {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 120, type: 'date', format: { type: 'date', format: 'dd-MM-yyyy' }},
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
}
}
},
methods: {
exportDetailDataBound(args) {
args.childGrid.columns[2].format = { type: 'date',format: 'dd\\/MM\\/yyyy'};
},
toolbarClick: function( args) {
if (args.item.id === 'Grid_excelexport') {
let exportProperties = {
hierarchyExportMode: 'All',
};
this.$refs.grid.excelExport(exportProperties);
}
}
},
provide: {
grid: [DetailRow, Toolbar, 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";
</style>Limitations
- Microsoft Excel permits up to seven nested levels in outlines. So that in the grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the Microsoft Limitation.
Remove header row while exporting
When exporting data from the Syncfusion® Vue Grid, you have an option to remove the header row from the exported file. This can be useful when you want to export grid data without including the header values in the exported document. To achieve this, you can utilize the excelHeaderQueryCellInfo and created event.
The following example demonstrates how to perform an export without the header by using the excelHeaderQueryCellInfo event to clear cell content in the header row and the created event to remove the header row from the Grid:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick' :excelHeaderQueryCellInfo='excelHeaderQueryCellInfo' :created='created'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='Freight' headerText='Freight' width=80></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
grid.value.excelExport();
}
};
const excelHeaderQueryCellInfo= function(args) {
args.cell.value = '';
};
const created = function() {
var processGridExportObject =
grid.value.ej2Instances.excelExportModule.__proto__.processGridExport;
grid.value.ej2Instances.excelExportModule.__proto__.processGridExport = function (
gobj,
props,
r
) {
var rows = processGridExportObject.call(this, gobj, props, r);
rows.shift();
rows.forEach((item, index) => {
item.index = index + 1;
});
return rows;
};
};
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick' :excelHeaderQueryCellInfo='excelHeaderQueryCellInfo' :created='created'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='Freight' headerText='Freight' width=80></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport'],
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
},
excelHeaderQueryCellInfo(args) {
args.cell.value = '';
},
created(){
var processGridExportObject =
this.$refs.grid.ej2Instances.excelExportModule.__proto__.processGridExport;
this.$refs.grid.ej2Instances.excelExportModule.__proto__.processGridExport = function (
gobj,
props,
r
) {
var rows = processGridExportObject.call(this, gobj, props, r);
rows.shift();
rows.forEach((item, index) => {
item.index = index + 1;
});
return rows;
};
}
},
provide: {
grid: [Toolbar, 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";
</style>How to add formula for the cell while exporting
The Grid component provides a convenient way to add formulas to cells during the export process. This feature allows you to perform calculations and apply formulas to specific cells in the exported Excel document. This can be particularly useful when you need to include calculated values or perform complex calculations.
To add formulas to cells during the export process, you can utilize the valueAccessor method along with the excelQueryCellInfo event.
In the following example, the toolbarClick function handles a toolbar button click event. When the Excel Export button is clicked, it triggers the Excel export process. Inside this function, an excelExportProperties object is defined, specifying that hidden columns should be included in the export. Inside the excelQueryCellInfo event, the valueAccessor method generates formulas for the desired cells and assigns these formulas to the cell’s formula property, ensuring that the calculated values are exported to the Excel document:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='inventoryData' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick' :excelQueryCellInfo='excelQueryCellInfo'>
<e-columns>
<e-column field="Inventor" headerText="Inventor Name" width="180" textAlign="Right"></e-column>
<e-column field="NumberofPatentFamilies" headerText="Number of Patent Families" width="180" textAlign="Right"></e-column>
<e-column field="Country" headerText="Country" width="140" textAlign="Left"></e-column>
<e-column field="Mainfieldsofinvention" headerText="Main fields of invention" width="200" textAlign="Left"></e-column>
<e-column field="Number of INPADOC patents" headerText="Number of INPADOC patents" width="180" textAlign="Right"></e-column>
<e-column field="TotalPatents" headerText="Total Patents" :visible='false' :valueAccessor="valueAccess" width="120" textAlign="Right"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { inventoryData } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties = {
includeHiddenColumn: true,
};
grid.value.excelExport(excelExportProperties);
}
};
const valueAccess= function(field, data){
const row = inventoryData.findIndex((item) => item.Inventor === data.Inventor) + 2;
return '=E' + row + '+' + 'B' + row;
};
const excelQueryCellInfo= function(args){
if (args.column.field === 'TotalPatents') {
args.value = valueAccess(args.column.field, (args.data));
args.cell.formula = args.value;
}
};
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :toolbarClick='toolbarClick' :excelQueryCellInfo='excelQueryCellInfo'>
<e-columns>
<e-column field="Inventor" headerText="Inventor Name" width="180" textAlign="Right"></e-column>
<e-column field="NumberofPatentFamilies" headerText="Number of Patent Families" width="180" textAlign="Right"></e-column>
<e-column field="Country" headerText="Country" width="140" textAlign="Left"></e-column>
<e-column field="Mainfieldsofinvention" headerText="Main fields of invention" width="200" textAlign="Left"></e-column>
<e-column field="Number of INPADOC patents" headerText="Number of INPADOC patents" width="180" textAlign="Right"></e-column>
<e-column field="TotalPatents" headerText="Total Patents" :visible='false' :valueAccessor="valueAccess" width="120" textAlign="Right"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { inventoryData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: inventoryData,
toolbarOptions: ['ExcelExport'],
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties = {
includeHiddenColumn: true,
};
this.$refs.grid.excelExport(excelExportProperties);
}
},
valueAccess: function(field, data){
const row = inventoryData.findIndex((item) => item.Inventor === data.Inventor) + 2;
return '=E' + row + '+' + 'B' + row;
},
excelQueryCellInfo: function(args){
if (args.column.field === 'TotalPatents') {
args.value = this.valueAccess(args.column.field, (args.data));
args.cell.formula = args.value;
}
},
},
provide: {
grid: [Toolbar, 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";
</style>Passing additional parameters to the server when exporting
Passing additional parameters to the server when exporting data in the Syncfusion® Vue Grid involves providing flexibility to include extra information or customize the export process based on specific requirements.
You can achieve this by utilizing the query property and the toolbarClick event. Within the query property, you can invoke the addParams method to add parameters to the request.
The following example demonstrates how to pass additional parameters to the server when PDF exporting within the toolbarClick event. Within the event, the additional parameters, specifically recordcount as 15, are passed using the addParams method and displayed as a message.
<template>
<div id="app">
<div style="margin-left:180px"><p style="color:red;" id="message">{{message}}</p></div>
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' :visible='false' 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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { Query } from "@syncfusion/ej2-data";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const queryClone = ref(null);
const message = ref(null);
const toolbarClick = (args) => {
if (args.item.id === 'Grid_excelexport') {
queryClone.value = grid.value.ej2Instances.query;
grid.value.ej2Instances.query = new Query().addParams('recordcount', '15');
message.value =
'Key: ' +
grid.value.ej2Instances.query.params[0].key +
' and Value: ' +
grid.value.ej2Instances.query.params[0].value + ' on ' + args.item.text;
grid.value.excelExport();
}
}
const excelExportComplete = () => {
grid.value.ej2Instances.query = queryClone.value;
}
provide('grid', [Toolbar, 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";
</style><template>
<div id="app">
<div style="margin-left:180px"><p style="color:red;" id="message">{{message}}</p></div>
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' :visible='false' 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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { Query } from "@syncfusion/ej2-data";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport'],
queryClone: "",
message:''
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') {
this.queryClone = this.$refs.grid.ej2Instances.query;
this.$refs.grid.ej2Instances.query = new Query().addParams('recordcount', '15');
this.message =
'Key: ' +
this.$refs.grid.ej2Instances.query.params[0].key +
' and Value: ' +
this.$refs.grid.ej2Instances.query.params[0].value + ' on ' + args.item.text;
this.$refs.grid.excelExport();
}
},
excelExportComplete() {
this.$refs.grid.ej2Instances.query = this.queryClone;
}
},
provide: {
grid: [Toolbar, 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";
</style>Limitations
- A CSV is a plain text format that does not support features such as cell rotation, font and color customization, column and row spanning, or adding formulas. CSV files store raw data without any formatting or styling.