Hi,
I am exporting multiple grids to a single Excel Spreadsheet, with each grid on a separate page:
ExcelExportProperties = { multipleExport: { type: 'NewSheet' } }
I am following the examples in the link below but I am not sure how to add new worksheet/page to the excel document.
https://ej2.syncfusion.com/angular/documentation/grid/excel-export/export-multiple-grids
I need to add a cover page to the beginning of the Excel spreadsheet which will have "Table of Contents" on it, including hyperlinks to all other sheets in the spreadsheets that will allow users to navigate to them by a click.
What would be the way to achieve that?
Thank you!
David,
Thanks for contacting Syncfusion support.
To navigate inside a workbook for different worksheets, file-level hyperlink support is needed. Currently, the EJ2 Excel export library does not have support for this. We logged a feature task for your requirement as “Provide File level hyperlink support in Grid to Excel export” and added it to our feature request database. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technical feasibility, and customer interest. This feature will be included in any of our upcoming releases.
Feedback Link: https://www.syncfusion.com/feedback/41734/provide-file-level-hyperlink-support-in-grid-to-excel-export
You can communicate with us regarding the open features at any time using the
above Feature Report page.
Regards,
Rajapandiyan S
Hi Rajapandiyan,
Thank you for your reply. I understand that the hyperlinks are not yet supported.
Is it possible to insert a new worksheet/page to the beginning of an excel document? If yes, could you tell me how?
Hi David,
We have prepared the sample
based on your requirement. By using the following code in the toolbarClick
event, you can dynamically add a cover page while exporting multiple Grids with a new sheet.
sample: https://stackblitz.com/edit/angular-vfhwo5?file=src%2Fapp.component.ts
[app.component.ts] if (args.item.text == 'Excel Export') { // define a worksheet var excelData1: any = { worksheets: [ { columns: [ // define the columns you want in the cover page { index: 1, width: 120, }, ], enableRtl: false, images: [], rows: [ // define the rows you want in the cover page { index: 1, cells: [ { index: 1, value: 'Grid 1 - Sheet 2', styles: { bold: true, borders: { color: '#E0E0E0' }, fontSize: 12, hAlign: 'right', }, }, ], }, { index: 2, cells: [ { index: 1, value: 'Grid 2 - Sheet 3', styles: { bold: true, borders: { color: '#E0E0E0' }, fontSize: 12, hAlign: 'right', }, }, ], }, { index: 3, cells: [ { index: 1, value: 'Grid 3 - Sheet 4', styles: { bold: true, borders: { color: '#E0E0E0' }, fontSize: 12, hAlign: 'right', }, }, ], }, ], }, ], styles: [ { borders: { color: '#E0E0E0' }, fontSize: 13, hAlign: 'right', }, ], }; var appendExcelExportProperties: any = { multipleExport: { type: 'NewSheet' }, }; // export the multiple Grids with a cover page var firstGridExport = this.grid1.excelExport(appendExcelExportProperties, true, excelData1); firstGridExport.then((f1Data) => { var secondGridExport = this.grid2.excelExport(appendExcelExportProperties, true, f1Data); secondGridExport.then((f2Data) => { var thirdGridExport = this.grid3.excelExport(appendExcelExportProperties, false, f2Data); }); }); } }
|
Regards,
Rajapandiyan S
Thank you for your reply.
Is it possible to dynamically build rows and cells for the Table of Contents based on the number of grids on the page as they might vary?
Hi David,
Query: Is it possible to dynamically build rows and cells for the Table of Contents based on the number of grids on the page as they might vary?
We suspect that you want to dynamically create the content for the cover page. If so, you can achieve this by using the following way.
[app.component.ts] if (args.item.text == 'Excel Export') { // create the cover page var excelData1: any = { worksheets: [ { columns: [ // define the columns you want in the cover page { index: 1, width: 120, }, ], enableRtl: false, images: [], rows: [], // define the content of cover page }, ], styles: [ { borders: { color: '#E0E0E0' }, fontSize: 13, hAlign: 'right', }, ], }; // generate the content dynamically
// get all the Grid var allGrids = document.getElementsByClassName('e-grid'); // push the content based on your requirement for (var i = 0; i < allGrids.length; i++) { excelData1.worksheets[0].rows.push({ index: i + 1, cells: [ { index: 1, value: 'Grid ' + (i + 1) + '- Sheet ' + (i + 2), styles: { bold: true, borders: { color: '#E0E0E0' }, fontSize: 12, hAlign: 'right', }, }, ], }); } var appendExcelExportProperties: any = { multipleExport: { type: 'NewSheet' }, }; var firstGridExport = this.grid1.excelExport( appendExcelExportProperties, true, excelData1 ); ---- } }
|
Sample: https://stackblitz.com/edit/angular-vfhwo5-pq9b2w?file=src%2Fapp.component.ts,src%2Fapp.component.html
Regards,
Rajapandiyan S