Multiple syncfusion controls to single Export to Excel
Hi Nagendra Gupta,
Query#:- I can understand the issues. I really appreciate if is there any custom code available to create excel file with two grid data (plain grid or tree), so that I will create manual file for same.
Or Is there any possibilities to mention start column for exporting the data from grid or tree grid.
We will check the feasibility of this requirement in Grid component and we will let you know further details by on or before 26th September 2022
Query#:- What is the use of isCollapsedStatePersist property in TreeGridExcelExportProperties
When we enable isCollapsedStatePersist property, it specifies the collapsed state persistence in exported file. Refer to the documentation link:-
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/exporting-default
isCollapsedStatePersist propertyà true
isCollapsedStatePersist property à false (collapsed state not persisted)
Regards,
Farveen sulthana T
Hi Nagendra Gupta,
We appreciate your patience.
Query#:-I can understand the issues. I really appreciate if is there any custom code available to create excel file with two grid data (plain grid or tree), so that I will create manual file for same.
Or Is there any possibilities to mention start column for exporting the data from grid or tree grid.
We have achieved your requirement using Grid component. We have override the processInnerRecords method from our source and we have exported the Two grids side by side by using the customized solution. Please refer the below code example and sample for more information.
By default when we exporting multiple Grids it will exported in up and down, because we have generated the index for the rows and cells based on up and down alignment. Please refer the below screenshot for more information.
Screenshot:
To export the Grids as side by side we have to update the organisedRows cells index and set it to the this.rows cells with using load event of the second Grid. Please refer the below screenshot for more information.
Screenshot:
Updated cells index to render the Grids as side by side
Note:- You can use the below way and based on your requirement you can create your own logic to update your organizedRows cells index to the this.rows to achieve your requirement.
|
App.Component.html:- <ejs-grid #grid [dataSource]="data" allowExcelExport="true" [toolbar]='toolbar' (toolbarClick)="toolbarClick($event)"> </ejs-grid> <ejs-grid #gridtwo [dataSource]="datatwo" allowExcelExport="true" (load)="loadtwo()" (toolbarClick)="toolbarClick($event)"> . . . </ejs-grid>
App.Component.ts:-
loadtwo() { //load event of second grid this.gridtwo.excelExportModule.processInnerRecords = function(gObj: any, exportProperties: any, isMultipleExport: any, workbook: any, r: any) { //by overriding the existing method this.groupedColLength = gObj.groupSettings.columns.length; let blankRows: number = 5; let separator: string; let rows: any = []; const colDepth: number = measureColumnDepth(gObj.columns as any); const isExportPropertiesPresent: boolean = !isNullOrUndefined(exportProperties); if (isExportPropertiesPresent && !isNullOrUndefined(exportProperties.multipleExport)) { this.expType = (!isNullOrUndefined(exportProperties.multipleExport.type) ? exportProperties.multipleExport.type : 'AppendToSheet'); if (!isNullOrUndefined(exportProperties.multipleExport.blankRows)) { blankRows = exportProperties.multipleExport.blankRows; } } if (isNullOrUndefined(workbook)) { this.workSheet = []; this.rows = []; this.columns = []; this.styles = []; } else if (this.expType === 'NewSheet') { this.workSheet = workbook.worksheets; this.rows = []; this.columns = []; this.styles = workbook.styles; } else { this.workSheet = []; this.rows = workbook.worksheets[0].rows; this.columns = workbook.worksheets[0].columns; this.styles = workbook.styles; this.rowLength = (this.rows[this.rows.length - 1].index + blankRows); this.rowLength++; }
if (isExportPropertiesPresent) { if (!isNullOrUndefined(isMultipleExport)) { if (!isNullOrUndefined(exportProperties.header) && (isMultipleExport || this.expType === 'NewSheet')) { this.processExcelHeader(JSON.parse(JSON.stringify(exportProperties.header))); } if (!isNullOrUndefined(exportProperties.footer)) { if (this.expType === 'AppendToSheet') { if (!isMultipleExport) { this.footer = JSON.parse(JSON.stringify(exportProperties.footer)); } } else { this.footer = JSON.parse(JSON.stringify(exportProperties.footer)); } } } else { if (!isNullOrUndefined(exportProperties.header)) { this.processExcelHeader(JSON.parse(JSON.stringify(exportProperties.header))); } if (!isNullOrUndefined(exportProperties.footer)) { this.footer = JSON.parse(JSON.stringify(exportProperties.footer)); } } } this.includeHiddenColumn = (isExportPropertiesPresent ? exportProperties.includeHiddenColumn : false); // eslint-disable-next-line @typescript-eslint/no-unused-vars return new Promise((resolve: Function, reject: Function) => { (<{childGridLevel?: number}>gObj).childGridLevel = 0; rows = this.processGridExport(gObj, exportProperties, r); this.globalResolve = resolve; this.gridPool[gObj.id] = true; this.helper.checkAndExport(this.gridPool, this.globalResolve); }).then(() => { const organisedRows: any = []; this.organiseRows(rows, rows[0].index, organisedRows); for (var i = 0; i < this.rows.length; i++) { var index = this.rows[i].cells[this.rows[i].cells.length-1].index; for(var j = 0; j < organisedRows[i].cells.length; j++) { organisedRows[i].cells[j].index = (index++) + 2; } } for(var i = 0; i < this.rows.length; i++) { this.rows[i].cells = this.rows[i].cells.concat(organisedRows[i].cells) } console.log(this.rows); if (!isNullOrUndefined(this.footer)) { if ((this.expType === 'AppendToSheet' && !isMultipleExport) || (this.expType === 'NewSheet')) { this.processExcelFooter(this.footer); } }
if (this.columns.length > 0) { this.sheet.columns = this.columns; } // eslint-disable-next-line @typescript-eslint/no-explicit-any this.sheet.rows = this.rows as any; this.sheet.enableRtl = this.parent.enableRtl; if (this.parent.allowFiltering && gObj.getVisibleColumns().length && isExportPropertiesPresent && exportProperties.enableFilter) { const headerRowLen: number = exportProperties.header ? exportProperties.header.headerRows || exportProperties.header.rows.length : 0; const autoFilters: any = { row: colDepth + headerRowLen, column: this.groupedColLength ? this.groupedColLength + 1 : this.sheet.columns[0].index, lastRow: this.sheet.rows.length, lastColumn: this.sheet.columns.length }; this.sheet.autoFilters = autoFilters; } this.workSheet.push(this.sheet);
this.book.worksheets = this.workSheet; this.book.styles = this.styles; gObj.notify('finalPageSetup', this.book);
if (!isMultipleExport) { if (this.isCsvExport) { if (isExportPropertiesPresent && !isNullOrUndefined(exportProperties.separator) && exportProperties.separator !== ',') { separator = exportProperties.separator; } const book: Workbook = new Workbook( this.book, 'csv', gObj.locale, (<{ currencyCode?: string }>gObj).currencyCode, separator ); if (!this.isBlob) { if (isExportPropertiesPresent && exportProperties.fileName) { book.save(exportProperties.fileName); } else { book.save('Export.csv'); } } else { this.blobPromise = book.saveAsBlob('text/csv'); } } else { const book: Workbook = new Workbook(this.book, 'xlsx', gObj.locale, (<{currencyCode?: string}>gObj).currencyCode); if (!this.isBlob) { if (isExportPropertiesPresent && exportProperties.fileName) { book.save(exportProperties.fileName); } else { book.save('Export.xlsx'); } } else { this.blobPromise = book.saveAsBlob('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'); } } if (this.isElementIdChanged) { gObj.element.id = ''; } delete gObj.expandedRows; } return workbook; }); } } |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sidebyside840740909.zip
Screenshot
Regards,
Farveen sulthana T
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Hi Farveen,
Thanks for your kind support, its tricky code and you have given example for normal grid i need this for tree grid.
Unable to find processInnerRecords in excelExportModule
Hi Farveen,
I have tried treegrid2.grid.excelExportModule but its undefined, excelExportModule is only available in treegrid not in treegrid.grid;
Hi Farveen,
Thanks for you update, have you checked same code with tree grid. Still didn't get expected output. Also after implementing this code ExcelQueryCellInfo Events are not executing.
WHAT COMES OUT AFTER IMPLEMENTING PROVIDED CODE
WHAT IS MY REQUIREMENT.
| CBO ERP LTD | |||
| Profit & Loss | |||
| From Date : 01/04/2022 To Date : 06/10/2022 Company : CBO ERP LTD,Steadfast Medishield (CWH),PARTYAPP CHECK | |||
| Print Date & Time: 06/10/2022 19:01 | |||
| Particulars | Debit Amt | Particulars | Credit Amt |
| Expense | 668,867,663.12 | Income | 271,619,894,248.83 |
| Direct Expenses | 6,094,462.57 | Indirect Incomes | (142,881.00) |
| NA | 85,032.00 | Other Income | (142,881.00) |
| Sample | 6,015,494.57 | Sales Accounts | 271,620,037,129.83 |
| Indirect Expenses | 1,991,325.07 | SGST/CGST SALES 12% | 19,396.77 |
| Salary & Expenses | 1,986,722.00 | IGST SALES 12% | 271,619,094,110.07 |
| Salary | 1,986,722.00 | SGST/CGST SALES 5% | 4,200.00 |
| Repair & Maintenance | 4,700.00 | IGST SALES 5% | 1,775,379.48 |
| Office Repair & Maintenance | 4,700.00 | IGST SALES 18% | (596,918.94) |
| Office Expenses | 4,700.00 | SGST/CGST SALES 0% | 2,304.00 |
| Miscellanious Expenses | 1,200.00 | IGST SALES 0% | 43,819.50 |
| Advertisements Expenses | 100.00 | IGST SALES 28% | (310,499.71) |
| Purchase Accounts | 660,781,875.48 | IGST SALES 48% | 157.30 |
| IGST PURCHASE 12% | 527,417.94 | STI 18% (SALE) | 5,181.36 |
| IGST PURCHASE 5% | 156,220.20 | CLOSING STOCK | 9,946,098,458,084.95 |
| IGST PURCHASE 18% | 660,017,969.64 | INCOME (REVENUE) | (142,881.00) |
| IGST PURCHASE 28% | 50,332.45 | ||
| IGST PURCHASE 48% | 19,608.00 | ||
| IGST PURCHASE 30% | 10,527.25 | ||
| GROSS PROFIT | 10,217,051,618,876.70 | ||
| NET PROFIT | 10,217,049,484,670.70 | ||
| Total | 1,02,17,71,84,95,214.75 | Total | 1,02,17,71,84,95,214.78 |
