Printing grid makes group columns visible
Since version 19.2 and including the latest 19.3 version, when printing the grid the group columns afterwards become set visible on the original grid column model. This bug is not immediately obvious, because the column model is not rendered to html. However, if afterwards the grid is exported to excel, then the excel spreadsheet will display the group columns as regular columns in addition to being grouped.
Attached is a demo. When running the demo, note that only the Name and Purchase columns are displayed on the web page, and it is grouped by Location. Print the grid, which looks fine. Then export to Excel. When opening the spreadsheet, not that the Location column is not visible, in addition to being grouped by Location.
It looks like what is happening is that when printing, the original grid is cloned to a separate grid object dedicated for printing. The columns from the original grid are only shallow copied to the new print grid, but each column object itself within the array is shared between the two grids. After printing the print grid is destroyed, which goes through a whole series of steps including destroying the groupings, which sets the group columns visible. Since the column objects are shared with the original grid, thus the original grid now has those columns set as visible. However, as stated previously, it's not rendered to html, so the web page looks the same. Below is the call stack for where the group columns are set visible when destroying the print grid. The group columns are set visible in Group.prototype.ungroupColumn.
eval @ VM720:1
Group.ungroupColumn @ group.js?7643:624
Group.clearGrouping @ group.js?7643:944
Group.destroy @ group.js?7643:923
ModuleLoader.clean @ module-loader.js?2a4e:57
Component.destroy @ component.js?02b4:100
Grid.destroy @ grid.js?9551:1006
Print.printGrid @ print.js?b934:186
Print.contentReady @ print.js?b934:143
Observer.notify @ observer.js?6607:101
Component.notify @ component.js?02b4:265
eval @ content-renderer.js?68fc:85
eval @ util.js?0c80:60
requestAnimationFrame (async)
getUpdateUsingRaf @ util.js?0c80:58
ContentRender.refreshContentRows @ content-renderer.js?68fc:454
eval @ render.js?166f:432
Observer.notify @ observer.js?6607:104
Base.trigger @ base.js?54ff:190
GridComponent.trigger @ grid.component.js?a9f2:149
Render.dataManagerSuccess @ render.js?166f:363
eval @ render.js?166f:221
Promise.then (async)
Render.refreshDataManager @ render.js?166f:221
Render.render @ render.js?166f:71
Grid.gridRender @ grid.js?9551:3406
Grid.render @ grid.js?9551:855
Component.appendTo @ component.js?02b4:183
Print.renderPrintGrid @ print.js?b934:118
Print.print @ print.js?b934:74
Grid.print @ grid.js?9551:2935
GridComponent.print @ grid.component.js?a9f2:431
print @ App.vue?ea99:86
invokeWithErrorHandling @ vue.esm.js?efeb:1872
invoker @ vue.esm.js?efeb:2197
original._wrapper @ vue.esm.js?efeb:7609
Attachment: SyncFusion_19.3_Grid_Group_Column_Visible_a62735b1.zip
Thank you Sujith.
Note that in my first comment I made two typos on the last sentence of the second paragraph. The first "not" should be "note", and the second "not" should be "now" as in:
When opening the spreadsheet, note that the Location column is now visible, in addition to being grouped by Location.
