1. Home
  2. Forum
  3. Vue
  4. When scrolling through data after data binding, there are often catons and red circles (load icons)

When scrolling through data after data binding, there are often catons and red circles (load icons)

Because of the large amount of data, the loading time is very long. I try to use the paging function to get the data circularly and render it in the table, but there is a problem: each time the circularly obtained data is added to the table, a carton and a red icon will appear to show the loaded style until the function is executed. Do you have any good suggestions to reduce the loading time when there is a large amount of data. Data files are sent as attachments.

Chrome ：Version 94.0.4606.81（Official Build ） (arm64)

version：

syncfusion/ej2-vue-spreadsheet :^19.3.59


附件：sample.json_d75626ad.zip


1 Reply
TS Thaneegairaj Sankar Syncfusion Team December 17, 2021 02:48 PM UTC

Hi KK,


Thank you for contacting Syncfusion support.


We have checked your reported requirement with the attached json file, and we are facing some difficulties while loading your json file in sample. We have suspect that you have used more number of rows and column. And we have some limitations in web platform, for number of elements rendered in the DOM. Our spreadsheet rendered maximum of 1 million cells that depends upon the rows and columns. The time delay in spreadsheet varies depend upon the cell count and formats applied in the spreadsheet, please find the below benchmark of our Spreadsheet.


 Scenario

Rows * Columns

Import with normal data (without any formatting, cell templates)

50,000 * 20 (1 million cells)

Import data with format (Row height/ cell formats & Merging Wrap text randomly)

30,000 * 10


Meanwhile, we have row virtualization support in spreadsheet. In this we have rendered the cells while scrolling the content. If you render more columns the rendering time is moderately high, based on the loaded columns. Before we proceed further, please share the below details.


·         If possible, please share us the row count and column count used in the json file.

·         We have included performance related fixes with our latest version, please check with latest version for Vue packages (19.4.38).

·         If possible, please share the customization code done in your sample.


Please provide the above requested information, based on that we will check and provide you a better solution quickly.


Regards,

Thaneegairaj S


Loader.
Up arrow icon