Tab of browser freezed when I export datagrid grouped by column

Question

Hello everyone!I like this components! Really really fantastic!But now I have a problem when I try to export data in pdf format, the tab of my browser freeze when I click the pdf export button, and I need to close tab of browser.Do you have some suggestions?here my codepen:

syncfusion-grid-group-pdf-export-header (forked) - CodeSandbox

thank you

Rajapandi Ravi · Answer

Hi Alberto, 

Greetings from Syncfusion support 

Based on this query we would like to let you know that when large amount of data is present the pdf export action will have some time delay to generate the exported file since all the Grid cells need to be initialized as pdf cell values in the pdf Grid and then exported. So, for this case we suggest you use the Grid’s server side export which is explained below, 

The Grid has an option to export the data to PDF in server side using Grid server export library. So, you can use this to perform server-side export for large amount of data.  

More details on this along with the required DLL references needed for performing this action can be checked in the below documentation link, 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/#exporting-grid-in-server 

Regards, 
Rajapandi R

Alberto · Answer

Thank you for the asnwer.I tried to insert a datasource with only a few records(5records), but the browser still crashes.this is my package.json.The versions of syncfusion are correct?"dependencies": {    "@casl/ability": "4.1.6",    "@casl/vue": "1.1.1",    "@fortawesome/fontawesome-svg-core": "^1.2.36",    "@fortawesome/free-brands-svg-icons": "^5.15.4",    "@fortawesome/free-regular-svg-icons": "^5.15.4",    "@fortawesome/free-solid-svg-icons": "^5.15.4",    "@fortawesome/vue-fontawesome": "^2.0.6",    "@fullcalendar/common": "^5.10.1",    "@fullcalendar/core": "^5.10.1",    "@fullcalendar/daygrid": "5.x",    "@fullcalendar/google-calendar": "^5.9.0",    "@fullcalendar/interaction": "^5.10.1",    "@fullcalendar/list": "^5.10.1",    "@fullcalendar/timegrid": "^5.10.1",    "@fullcalendar/vue": "^5.10.1",    "@syncfusion/ej2": "^19.4.43",    "@syncfusion/ej2-barcode-generator": "^19.4.38",    "@syncfusion/ej2-base": "19.4.42",    "@syncfusion/ej2-buttons": "^19.4.42",    "@syncfusion/ej2-charts": "^19.4.43",    "@syncfusion/ej2-compression": "^19.4.38",    "@syncfusion/ej2-data": "^19.4.42",    "@syncfusion/ej2-file-utils": "^19.4.38",    "@syncfusion/ej2-inputs": "^19.4.43",    "@syncfusion/ej2-layouts": "^19.4.43",    "@syncfusion/ej2-lists": "^19.4.38",    "@syncfusion/ej2-navigations": "^19.4.41",    "@syncfusion/ej2-pdf-export": "^19.4.43",    "@syncfusion/ej2-popups": "^19.4.41",    "@syncfusion/ej2-splitbuttons": "^19.4.40",    "@syncfusion/ej2-svg-base": "^19.4.42",    "@syncfusion/ej2-vue-barcode-generator": "^19.4.38",    "@syncfusion/ej2-vue-base": "^19.4.40",    "@syncfusion/ej2-vue-buttons": "^19.4.42",    "@syncfusion/ej2-vue-charts": "^19.4.43",    "@syncfusion/ej2-vue-dropdowns": "^19.4.42",    "@syncfusion/ej2-vue-grids": "^19.4.43",    "@syncfusion/ej2-vue-layouts": "^19.4.43",    "@syncfusion/ej2-vue-maps": "^19.4.42",    "@syncfusion/ej2-vue-navigations": "19.2.0.49",    "@syncfusion/ej2-vue-pdfviewer": "^19.4.43",    "@syncfusion/ej2-vue-popups": "^19.4.41",    "@syncfusion/ej2-vue-splitbuttons": "^19.4.40",    "@vue/composition-api": "^1.4.1",    "@vueuse/core": "4.0.0",    "animate.css": "4.1.1",    "apexcharts": "3.23.0",    "axios": "0.21.1",    "axios-mock-adapter": "1.19.0",    "bootstrap": "4.6.0",    "bootstrap-vue": "2.21.1",    "browserslist": "^4.19.1",    "chart.js": "2.9.4",    "core-js": "^3.20.0",    "echarts": "4.8.0",    "element-ui": "^2.15.6",    "jsonwebtoken": "8.5.1",    "leaflet": "1.6.0",    "lodash": "^4.17.21",    "moment": "^2.29.1",    "portal-vue": "2.1.7",    "postcss-rtl": "1.7.3",    "prismjs": "1.19.0",    "swiper": "5.4.5",    "uuid": "8.3.2",    "vee-validate": "3.4.5",    "vue": "2.6.12",    "vue-apexcharts": "1.6.0",    "vue-autosuggest": "2.2.0",    "vue-awesome-swiper": "4.1.1",    "vue-chartjs": "3.5.0",    "vue-class-component": "^7.2.6",    "vue-cleave-component": "2.1.3",    "vue-clipboard2": "0.3.1",    "vue-context": "6.0.0",    "vue-echarts": "5.0.0-beta.0",    "vue-feather-icons": "5.1.0",    "vue-flatpickr-component": "8.1.6",    "vue-form-wizard": "0.8.4",    "vue-good-table": "2.21.0",    "vue-googleapis": "^1.0.10",    "vue-i18n": "8.22.2",    "vue-perfect-scrollbar": "0.2.1",    "vue-prism-component": "1.1.1",    "vue-quill-editor": "3.0.6",    "vue-ripple-directive": "2.0.1",    "vue-router": "3.4.9",    "vue-select": "3.11.2",    "vue-slider-component": "3.2.11",    "vue-sweetalert2": "4.1.1",    "vue-toastification": "1.7.8",    "vue-tree-halower": "1.8.3",    "vuedraggable": "2.24.3",    "vuex": "3.6.0"  },  "devDependencies": {    "@vue/cli-plugin-babel": "^4.5.15",    "@vue/cli-plugin-eslint": "^4.5.15",    "@vue/cli-plugin-router": "^4.5.15",    "@vue/cli-plugin-vuex": "^4.5.15",    "@vue/cli-service": "^4.5.15",    "@vue/eslint-config-airbnb": "^5.3.0",    "@vuepress/plugin-medium-zoom": "^1.7.1",    "babel-eslint": "^10.0.3",    "babel-plugin-component": "^1.1.1",    "eslint": "6.8.0",    "eslint-plugin-import": "^2.25.3",    "eslint-plugin-vue": "6.2.2",    "sass": "1.32.*",    "sass-loader": "^10.1.0",    "vue-template-compiler": "2.6.12"  }

Sujith Kumar Rajkumar · Answer

Hi Alberto, 
 
We validated the reported problem by having around 20 records in the sample you had previously shared but unfortunately could not reproduce it from our end. Please check the below sample for reference, 
 
Sample: https://codesandbox.io/s/syncfusion-grid-group-pdf-export-header-forked-i5pbl?file=/src/components/Grid.vue 
 
From the shared image we could see that you have referenced different package versions for the Syncfusion packages and we suspect that might have installed duplicate packages inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this and install the latest packages, 
 

Delete package.lock.json file from your application.   
Remove the @syncfusion package folder from the node_modules.
Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.   
Then install the NPM packages.
 
Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 
 
If problem still persists then please share us the following information to validate further on this, 
 

Are any console errors thrown? If so please share it.
Share us a video demonstration of the problem.
Share us the Grid code file used in your application.
If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample. This would be helpful to identify your exact problem case and validate further based on that.
 
Regards, 
Sujith R

Alberto · Answer

Hello guys!Thank you for the fast answer.I followed your steps, but nothing changed.I created a new app my original package.json. And the problem persist.in attached you can download vue app with grid data.Thank you :)Attachment: helloworld_7736e1df.zip

Joseph Christ Nithin Issack · Answer

Hi Alberto, 

   Thanks for your update. 

   On inspecting the provided sample, we found that there are about ten thousand records in the grid. When we click on the pdf export button, the page freezes for about 15 seconds until the pdf is generated and downloaded and after the pdf is downloaded the page is acting normal. This is because a large amount of data is generated into pdf at the same time, hence there is a time delay in downloading the pdf. When less number of data is there (eg 10) the page is not freezing and the pdf is downloaded instantly. Currently we are checking for the feasibility in decreasing the time delay in downloading the pdf. We will provide further details on or before 1st February, 2022. We appreciate your patience until then. 

Regards, 
Joseph I.

Joseph Christ Nithin Issack · Answer

Hi Alberto, 

  Thanks for your patience. 

  As we have mentioned in the previous update, there are about ten thousand records in the grid. When we click on the pdf export button, the page freezes for about 15 seconds until the pdf is generated and downloaded. This is because a large amount of data is generated into pdf at the same time, hence there is a time delay in downloading the pdf. We can reduce a few seconds of the time taken to download the pdf without any theme to the pdf.  

  We need you to confirm if it is okay for you to generate the pdf without the theme. Based on your confirmation we will proceed further. 

Please get back to us for further details. 

Regards, 
Joseph I.