Grid Excel export adding header only uses first cell of header

Question

Hello,I am trying to add a header when exporting to excel. There should be two different cells in the header but only the first one appears. Below is the properties passed to the function when exporting and an image of what the excel sheet looks like. Attached is the code being used for the exporting.  If I am doing something wrong please let me know.Thanks,CharlesAttachment: app.component_ede7fa4c.zip

Rajapandiyan Settu · Accepted Answer

Hi Charles, 

Thanks for contacting Syncfusion support. 

Query: I am trying to add a header when exporting to excel. There should be two different cells in the header but only the first one appears. 

We have analyzed your query at our end. By validating your code, we found that the index is not defined to the cells used in headerRows. This is the cause of reported behavior. You can resolve the reported behavior by using following code example. 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/advanced-exporting 
Doc: https://ej2.syncfusion.com/angular/documentation/grid/excel-exporting/#to-add-header-and-footer 






[app.component.ts] 

 
      const excelExportProperties1: any = { 
        header: { 
          headerRows: 1, 
          rows: [ 
            { 
              cells: [ 
                {  
                  index: 1,  // provide the index of the cell 
                  colSpan: 4, 
                  value: 'This is a Real Corporation', 
                  style: { 
                    fontColor: '#ffffff', 
                    hAlign: 'Center', 
                    backColor: '#467FA5', 
                  }, 
                }, 
                { 
                  index: 5, // provide the index of the cell 
                  colSpan: 2, 
                  value: 'Test', 
                  style: { 
                    fontColor: '#ffffff', 
                    hAlign: 'Center', 
                    backColor: '#90AFC4', 
                  }, 
                }, 
              ], 
            }, 
          ], 
        }, 
      }; 
      this.grid.excelExport(excelExportProperties1); 
 


We have prepared a sample for your reference. You can get it from the below link. 

Sample: https://stackblitz.com/edit/angular-2nqrfz-fgdftv?file=app.component.ts 

Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S