Exporting hierarchy grid in Vue Grid component

5 Apr 20235 minutes to read

The grid have an option to export the hierarchy grid to excel document. By default, grid will exports the visible child grids in expanded state. you can change the exporting option by using the ExcelExportProperties.hierarchyExportMode property. The available options are,

Mode	Behavior
Expanded	Exports the visible child grids in expanded state and remaining child grid in collapsed state when args.isChild property is set to true in beforeExcelExport event.
All	Exports the all the child grids in expanded state.
None	Exports all child grids in collapsed state when args.isChild property is set to true in beforeExcelExport event.

app.vue

<template>
    <div id="app">
        <ejs-grid ref='grid' id='Grid' :dataSource='parentData' :childGrid='childGrid' :toolbar='["ExcelExport"]' :toolbarClick='toolbarClick' :beforeExcelExport='beforeExcelExport' :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 Vue from "vue";
import { GridPlugin, DetailRow, Toolbar, ExcelExport, ExcelExportProperties } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
import { extend } from '@syncfusion/ej2-base';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      parentData: employeeData,
      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: "Expanded"
            };
            this.$refs.grid.excelExport(exportProperties);
        }
      },
      beforeExcelExport: function(args) {
        args.isChild = true;
      }
  },
  provide: {
      grid: [DetailRow, Toolbar, ExcelExport]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.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