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. You will find sample code that shows grid with infinite scrolling in JavaScript, Angular, React and Vue, in following sections below.

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.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

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.

• JavaScript
• Angular
• React
• Vue

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

• JSON

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:

• JavaScript
• Angular
• React
• Vue

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.

• JavaScript
• Angular
• React
• Vue

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.

A sample code is available in JavaScript, Angular, React and Vue that shows how to load data with infinite scrolling into the grid. The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.