asked on March 27, 2019
Hi Team,
Am a Premium Licensed User.
In the below provided sample(OneMillionRows), we found here the virtualization(loading only the view-able rows in DOM) is enabled for grid-rows...right?
https://www.flexmonster.com/demos/js/one-million-rows/
How should we enable this feature in pivot-config?. And we couldn't find any docs on this.
⋅ March 27, 2019
Hello, Ravi,
Thank you for your question.
In Flexmonster, all of the data for JSON and CSV data sources is loaded into memory and kept in the client's browser.
Flexmonster has a virtual grid, hence Flexmonster renders only the visible part of the DOM.
Please note that the virtualization feature is enabled by default, so there is no need to enable it manually.
We don't have a virtual data loading feature since all of the data is loaded from the start.
You may have wondered how the data is loaded with such speed in our One million rows example.
The answer can be found here on our forum.
Please keep in mind that in this demo, the data is also loaded fully into the browser's memory.
Please let us know if you have further questions.
Best Regards,
Vera
⋅ March 28, 2019
Hi Vera Didenko,
Thank you for your response.
We have below two clarifications from your reply.
#1, Need brief/practical explanation about browser storage (as like we pointed-out for #2)?
How this large amount of data storing in client's browser and how to check and view these data?. Whether by localStorage/sessionStorage object ?
#2, Why virtualization is not enabled?
- You have mentioned that "The virtualization feature is enabled by default, so there is no need to enable it manually."
- But, you see the below demo sample doesn't have Grid-Virtualization enabled as like 'OneMillionRows' sample.
https://www.flexmonster.com/demos/js/flat-table/
To confirm this, just open browser's 'web inspector' and inspect the row elements. Now you'll see all the 1000 rows but whereas in 'OneMillionRows' sample it has only view-able 13 rows(out of 1 million) in DOM.
⋅ March 29, 2019
Hello, Ravi,
Thank you for your questions.
#1 About browser storage:
Flexmonster uses browser resources to store data, not browser storage as it is, just browser memory. The data is stored in RAM but not in localStorage/sessionStorage objects. It is not possible to check and view the data as it is parsed into our inner structures. All available manipulations can be done via API. For more details about the API calls available, please have a look at our API reference: https://www.flexmonster.com/api/.
#2 How virtualization works:
The Flat table demo you provided also has Grid-Virtualization enabled. You can check this by opening browser’s 'web inspector' and inspecting the elements. For example, let's have a closer look at cell Accessories (row 2, column 1). Here is its HTML:
<div style="text-align:left;min-width:100px;height:30px;top:0px;left:100px;" class="fm-cell" data-c="1" data-r="2">Accessories</div>
Please pay attention to data-r attribute. We can see that data-r="2" which means the cell is from the second row. If you keep scrolling the elements in 'web inspector', you'll see that the cell elements are only created up to the 17th row (data-r="17").
On the Flat table demo, only 12 rows are visible without scrolling and only 17 rows are created. However, the demo has 1000 rows. If you scroll down the demo, other rows will be rendered. I hope my explanations clear up the way virtualization works.
Please let us know if you have further questions.
Regards,
Tanya
