Posted 8 July 2023, 1:19 pm EST - Updated 8 July 2023, 1:24 pm EST
Multiple tabs Export to excel and PDF
Posted by: saisreeja.gadi on 8 July 2023, 1:19 pm EST
-
saisreeja.gadi
-
vivek.pannu
Posted 9 July 2023, 4:56 pm EST
Hi,
Yes, this is possible. You can merge all flexGrid’s Excel exports to a single Xlsx workbook and then save it as an Excel file, as per your requirements. Similarly, for exporting pdf, you can create a pdf doc and then insert all grids into the same doc and then save it as a pdf.
Please refer to the following sample for a demonstration - https://jscodemine.grapecity.com/share/pwWpRxE8g0Kt2dZg_Tgffg
Regards
-
saisreeja.gadi
Posted 10 July 2023, 8:14 pm EST - Updated 11 July 2023, 1:33 am EST
Hi vivek,
Thank you for your reply.
I am facing one more problem I am trying to add **autoSizeColumns() ** Its not working for me. I need to apply that for all the grids in multiple tabs. Can you please help me on this.
In my code **autoSizeColumns() ** working for the grid present in first tab only. It’s not working for the grids that are present in other tabs -
vivek.pannu
Posted 11 July 2023, 6:25 pm EST
Hi,
The autoSizeColumns for the flexGrid won’t work until the grid cells are not rendered on the webpage, as the exact width cannot be measured until then. To avoid this issue, you can handle the ‘selectedIndexChanged’ event of the tab panel to autoSize the columns when the grid is visible.
Please refer to the following sample for a demonstration - https://jscodemine.grapecity.com/share/HLyZX9i4dECelXfwFjCw7w
Regards
-
saisreeja.gadi
Posted 11 July 2023, 7:30 pm EST
Hi Vivek
grid.collectionView.loaded.addHandler((s: any, e: any) => { grid.autoSizeColumns(); })In the above code I am getting error like
Property ‘loaded’ does not exist on type ‘ICollectionView’. -
vivek.pannu
Posted 11 July 2023, 7:43 pm EST
Hi,
You can update the above code like this to avoid this issue -
let cv: any = grid.collectionView; cv.loaded.addHandler((s: any, e: any) => { grid.autoSizeColumns(); })I have updated the sample with the same.
Please note that I have handled the ‘loaded’ event of the ‘ODataCollectionView’ to initially auto-size the columns when data is loaded, this event (loaded) is not available in the normal CollectionView class.
In case, if you are not using ‘ODataCollectionView/RestCollectionView’ in your project, then you can handle the ‘loadedRows’ event of the flexGrid for the same purpose.Regards
-
haniji7658
Posted 19 July 2023, 2:54 am EST
The program gives users the ability to conveniently manage and share information across many files and platforms by allowing data export from multiple tabs to Excel and PDF formats.
Users may easily create detailed reports and presentations by exporting data from different tabs to Excel and PDF, enabling seamless cooperation and data transmission throughout the company.
-
saisreeja.gadi
Posted 24 July 2023, 9:55 pm EST
Hi Vivek,
While writing unit test cases for the component file which is having exportexcel functionality I am getting error like
TypeError: Cannot read properties of undefined (reading ‘saveAsync’)Regards
-
vivek.pannu
Posted 25 July 2023, 7:49 pm EST - Updated 27 July 2023, 9:35 pm EST
Hi,
Sorry, but we are unable to replicate the issue on our end as there is no such behavior observed on our side. Could you please share a small sample in which the issue can be replicated so that we can further investigate the issue and assist you accordingly?
You can refer to the attached sample in which we tried to replicate the issue. In case, if there is something we missed, please let us know.
Regards
-
saisreeja.gadi
Posted 3 August 2023, 11:13 am EST - Updated 3 August 2023, 3:04 pm EST
Hi vivek,
I am getting the below error while writing unit test case for export Excel functionality. Getting error in console
SPEC FILE
it('should call exportExcel when export excel button is clicked', fakeAsync(() => { fixture.detectChanges(); flush(); const componentSpy = spyOn(component, 'exportExcel').and.callThrough(); let buttonElem = fixture.debugElement.query(By.css('#export-excel')); buttonElem.triggerEventHandler('click', null); expect(componentSpy).toHaveBeenCalled(); }));COMPONENT FILE
exportExcel(){ let workbook; this.gridInfo.forEach((grid, index) => { let sheetData = wjcGridXlsx.FlexGridXlsxConverter.saveAsync(grid, { includeCellStyles: false }) sheetData.sheets[0].name = this.tabHeaders[index]; if (workbook) { workbook.sheets.push(sheetData.sheets[0]); } else { workbook = sheetData; } }) workbook.saveAsync('FlexGrid.xlsx'); } }ERROR
‘ERROR’, TypeError: Cannot read properties of undefined (reading ‘saveAsync’)
TypeError: Cannot read properties of undefined (reading ‘saveAsync’)
at ChangesGridComponent.exportExcel (http://localhost:9876/_karma_webpack_/main.js:42144:14)
at SpyStrategy.exec (http://localhost:9876/absoluteC:/MYPROJECT/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?8f66117bbfbdf7b03a8f43bc667e3a4421ce15de:8245:39)
at SpyStrategyDispatcher.exec (http://localhost:9876/absoluteC:/MYPROJECT/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?8f66117bbfbdf7b03a8f43bc667e3a4421ce15de:7806:23)
at spy (http://localhost:9876/absoluteC:/MYPROJECT/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?8f66117bbfbdf7b03a8f43bc667e3a4421ce15de:7686:46)
at http://localhost:9876/absoluteC:/MYPROJECT/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?8f66117bbfbdf7b03a8f43bc667e3a4421ce15de:7660:16
at ChangesGridComponent.wrap [as exportExcel] (http://localhost:9876/absoluteC:/MYPROJECT/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?8f66117bbfbdf7b03a8f43bc667e3a4421ce15de:7732:20)
at Object.eval [as handleEvent] (ng:///DynamicTestModule/ChangesGridComponent.ngfactory.js:54:27)
at handleEvent (http://localhost:9876/_karma_webpack_/vendor.js:166193:37)
at callWithDebugContext (http://localhost:9876/_karma_webpack_/vendor.js:167775:21)
at Object.debugHandleEvent [as handleEvent] (http://localhost:9876/_karma_webpack_/vendor.js:167420:10) -
vivek.pannu
Posted 3 August 2023, 5:32 pm EST
Hi,
This issue happened because the workbook instance is updated when ‘wjcGridXlsx.FlexGridXlsxConverter.saveAsync’ method returns a workbook, which is an asynchronous task, so you’ll need to add a wait statement in your test, to wait until the workbook is generated and updated in the workbook instance. You can update your code with the following code to avoid this issue -
it('should call exportExcel when export excel button is clicked', fakeAsync(async () => { fixture.detectChanges(); flush(); await fixture.whenStable().then(() => { const componentSpy = spyOn(component, 'exportExcel').and.callThrough(); let buttonElem = fixture.debugElement.query(By.css('#export-excel')); buttonElem.triggerEventHandler('click', null); expect(componentSpy).toHaveBeenCalled(); }) }));You can also refer to the attached updated sample for the same.
Regards
-
saisreeja.gadi
Posted 3 August 2023, 6:20 pm EST
Hi vivek,
After using that code also getting the same error.
Regards
-
vivek.pannu
Posted 3 August 2023, 7:36 pm EST
Hi,
Could you please confirm if you are facing the same issue in the above attached sample also? If not, please update the sample to replicate the issue and share it with us, so that we can further investigate the issue and assist you accordingly.
Regards
