Load Data with Infinite Scrolling in Grid Component

There are multiple ways to add new data to the Grid component on demand. One example is server side pagination, where whenever a grid page changes, a new data from a server is loaded into the grid. The other way in case of a TreeGrid, for rows with children, instead of loading the tree structure all at once, you can do it partially only for the parent row that is currently expanding, etc.

In this example, you will learn how to load data on demand into the Grid, whenever you scroll to the end. This feature is called infinite scrolling, where once the scrolling end is reached, the Grid is populated with additional data.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

As example shows, scrolling to the end using vertical scroll bar, starts a loading animation at bottom side of the Grid component. When loading finishes a new data is added to the grid. You can repeat this process until all data is fully loaded into the grid.

This demo also simulates fast data update of grid cells. The cell values changes based on simple algorithm in the sample code.

Grid with Infinite Scrolling

To create infinite scrolling in the Grid component, at first you need to handle the scrollPosChanged event. Set up an event handler that will determine whether the end of scroll position is reached, if that is the case and the data is not yet fully loaded, make a request to load a new data from the server.

Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.

In this example, we have the grid data separated in few JSON files. Whenever a new data is requested, a different JSON file is loaded based on current load number. The structure of these JSON files is as follows

As you can see from the JSON file, it consist of row objects with a pair of column name and a value, based on data table used to create the JSON content. Of course, you cannot load this data directly into the Grid component, because it uses a different data structure that consists of columns, rows and cell objects. For this purpose, when JSON file is loaded you need to convert the JSON data into a format recognizable by the Grid:

During the loading process, it is a good practice to show to the user that something is loading. For this purpose, you can create a custom loading presentation. In this case, as an example at bottom side of the grid a loading icon will appear whenever a new JSON file is being loaded. Because this operation (depending on the data size) is quick, for demonstration purposes a small delay 1 second is added for loading animation to take place prior JSON data is loaded into the Grid.

This process will take place until the whole data is loaded, after which the loading icon will no longer appear.

Conclusion

Although the IntegralUI Grid component can work with thousands of rows, in most cases this may not be required. Instead, you can load data on demand and add new data to the Grid on request. One example of how to add new data to the grid is using infinite scrolling, where whenever the end of scrolling position is reached, a new data is loaded from a JSON file and added to the grid component. To make this loading process more user friendly, you can create custom loading animations, in this case a loading icon displayed at the bottom side of the grid.

The Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework .