Add new column while Exporting to Excel

[Christian DAquino]

Hi,

When exporting to excel, I'd like the exported file to have an additional column (blank) that doesn't exist on the data grid. E.g: I have columns called 'pn', 'description' and 'quantity'. I'd like to add a column called 'checked' between 'description' and 'quantity' so that someone can print the excel file and tick it.

[Joseph Christ Nithin Issack]

Hi Christian, 

  Greetings from Syncfusion support. 

  Based on your requirement, you want to have an additional column that is not present in the grid but you want it to be in the exported excel file. Your requirement can be achieved by adding a hidden column in your grid and while exporting you can enable the `includeHiddenColumn` property in the `excelExportProperties` and pass it as the argument for the `excelExport` method of the EJ2 Grid in the `toolbarClick` event. 

Please find the code example below. 

<template> 

  <div id="app"> 

    <ejs-grid 

      id="Grid" 

      ref="grid" 

      :toolbar="toolbarOptions" 

      :dataSource="data" 

      :allowPaging="true" 

      :allowExcelExport="true" 

      :toolbarClick="toolbarClick" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Pn" 

          width="180" 

          isPrimaryKey="true" 

          headerTextAlign="center" 

        ></e-column> 

        <e-column 

          field="CustomerID" 

          headerText="Description" 

          width="180" 

          headerTextAlign="center" 

        ></e-column> 

        <e-column headerText="checked" :visible="false" width="180"></e-column> 

        <e-column 

          field="EmployeeID" 

          headerText="Quantity" 

          width="180" 

          headerTextAlign="center" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Freeze, 

  Edit, 

  Toolbar, 

  ExcelExport, 

  Page, 

  Filter, 

  ColumnChooser, 

  ContextMenu, 

} from "@syncfusion/ej2-vue-grids"; 

import { gridData } from "./data"; 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: gridData, 

      toolbarOptions: ["ExcelExport"], 

    }; 

  }, 

  methods: { 

    toolbarClick: function (args) { 

      if (args.item.id === "Grid_excelexport") { 

        // 'Grid_excelexport' -> Grid component id + _ + toolbar item name 

        let excelExportProperties = { 

          includeHiddenColumn: true, 

        }; 

        this.$refs.grid.excelExport(excelExportProperties); 

      } 

    }, 

  }, 

  provide: { 

    grid: [ 

      ContextMenu, 

      Freeze, 

      Edit, 

      Toolbar, 

      ExcelExport, 

      Page, 

      Filter, 

      ColumnChooser, 

    ], 

  }, 

}; 

</script> 

 

<style> 

@import https://cdn.syncfusion.com/ej2/material.css; 

</style> 

 

Sample: https://codesandbox.io/s/vue-template-forked-ccviu?file=/src/App.vue 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/excel-exporting/#export-hidden-columns
https://ej2.syncfusion.com/vue/documentation/grid/excel-exporting/#show-or-hide-columns-on-exported-excel 

Please find the attached sample and revert for more queries. 

Regards, 

Joseph I.