Custom name for each excel tab

[Arjuna Dratharashtra]

I would like to have meaningful names for each sheet when I export multiple grids in the same excel file. Currently they name as Sheet1, Sheet2 etc. I want them to have custom names. Please help.

[Prasanna Kumar Viswanathan]

Hi Arjuna , 

 

Greetings from Syncfusion support 

 

Query : Custom name for each excel tab 

 

To achieve this query we suggest to use the Workbook concept in Excel export. Here, we can change the excel tab name using the Name property in Workbook concept. Please follow the below code snippet and sample for more reference. 

 

App.component.ts 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { Workbook } from '@syncfusion/ej2-excel-export'; 

@Component({ 

    selector: 'app-root', 

    template: `<p><b>First Grid:</b></p> 

    <ejs-grid #grid1 id='firstGrid' [dataSource]='fData' [toolbar]='toolbarOptions' [allowExcelExport]='true' 

    (toolbarClick)='toolbarClick($event)'> 

                <e-columns> 

                           … 

                </e-columns> 

                </ejs-grid> 

                <p><b>Second Grid:</b></p> 

                <ejs-grid #grid2 id='secondGrid' [dataSource]='sData' [allowExcelExport]='true'> 

                <e-columns> 

                 … 

                </e-columns> 

                </ejs-grid> 

                ` 

}) 

export class AppComponent implements OnInit { 

    public fData: object[]; 

    public sData: object[]; 

    public names: any ; 

    ngOnInit(): void { 

        this.fData = data.slice(0, 5); 

        this.names = ["OrderDetail", "EmployeeDetail"];    // here you can customize the sheet names 

         

    } 

    toolbarClick = (args: ClickEventArgs) => { 

      var firstGrid = (document.getElementById("firstGrid") as any).ej2_instances[0]; 

        if (args.item.id === 'firstGrid_excelexport') { 

      var appendExcelExportProperties = { 

      multipleExport: { type: 'NewSheet' } 

    }; 

    var Grids = []; 

    for (var i = 0; i < document.querySelectorAll(".e-grid").length; i++) { 

      var grid = (document.getElementById(document.querySelectorAll(".e-grid")[i].id) as any).ej2_instances[0]; 

      Grids.push(grid); 

    } 

    if (Grids.length > 1) { 

      (appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[0]; 

      var firstGridExport = firstGrid.excelExport(appendExcelExportProperties, true).then(function (fData) { 

        fData.worksheets[0].name = this.names[0]; 

        this.exportData = fData; 

        for (var j = 1; j < Grids.length - 1; j++) { 

          (appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[1]; 

          Grids[j].excelExport(appendExcelExportProperties, true, this.exportData).then(function (wb) { 

            (appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[wb.worksheets.length]; 

            this.exportData = wb; 

            if (this.exportData.worksheets.length === (Grids.length - 1)) { 

              for (var k = 0; k < this.exportData.worksheets.length; k++) { 

                if (!this.exportData.worksheets[k].name) { 

                  this.exportData.worksheets[k].name = this.names[k];          //Sheet name is changed to the given string values 

               } 

        } 

        var lastGridExport = Grids[Grids.length - 1].excelExport(appendExcelExportProperties, true, this.exportData).then(function (wb) { 

          (appendExcelExportProperties.header.rows[0].cells[0] as any).value = this.names[this.names.length - 1]; 

          wb.worksheets[wb.worksheets.length - 1].name = this.names[Grids.length - 1]; 

          const book = new Workbook(wb, 'xlsx');            //  Stores the changed name as workbook 

          book.save('Export.xlsx');                                       //  Save the stored file in Excel format 

        }.bind(this)); 

      }.bind(this)); 

    } 

    

 

 

Sample : https://stackblitz.com/edit/angular-2tcduk-w2wdwg?file=app.component.ts 

 

Please get back to us if you need further assistance 

 

Regards 

Prasanna Kumar N.S.V 

[Arjuna Dratharashtra]

Thank you very much for the solution. Actually used a promise chain from grid.excelExport and pushed them to Workbook object.

[Gokul Ramalingam]

Hi Arjuna, 

  

We are happy to hear that your issue has been resolved. 

  

Please get back to us if you need further assistance. 

  

Regards, 

Gokul R