Infinite scrolling is about visualizing huge amounts of data in a single window that doesn’t end. Usually in infinite scrolling, data is fetched on demand when the scroll head reaches the bottom of the window.

Infinite scrolling in DataGrid works in a similar way. Initially, a part of the data is displayed in the grid, and when a user scrolls down to the bottom of it, an additional query is made, and the fetched data is appended. So, we can load a huge amount of data without degrading the DataGrid performance. Infinite scrolling is an alternative to paging, where the newly queried data is displayed in new pages.

Some of the most common examples of infinite scrolling are:

• Scrolling through Twitter tweets
• Scrolling through Facebook posts
• Google Image search

In this blog post, we will show you how easily you can visualize huge amounts of data in a single grid view using the infinite scrolling feature in our Angular Data Grid.

Why we use infinite scrolling

Infinite scrolling provides a great user experience, it efficiently queries only the data necessary, and it reduces the number of data reads from the server back and forth.

JS2 DataGrid infinite scrolling with templates

What is special about infinite scrolling in EJ2 DataGrid?

All modern browsers have a hard limit on the amount of memory allocated to a particular webpage and browsers are not designed to handle millions of elements.

Due to this browser limitation, when continuously appending data to a grid component, the browser will go unresponsive. This is due to the gradual increase in the DOM weightage and browser memory.

To overcome this problem, our DataGrid is provided with a cache mode option. When enabling this feature, DataGrid will maintain row elements based on the maxBlocks count value of the infiniteScrollSettings. Once this limit is reached, DataGrid will remove row elements only from DOM and maintain the data on the grid instance.

Steps to implement infinite scrolling with frozen grid in Angular environment

Step 1: Set up Angular environment

Use Angular CLI to set up your Angular applications. To install Angular CLI, use the following command.

npm install -g @angular/cli

Step 2: Create an Angular application

Start a new Angular application using the following Angular CLI command.

ng new my-app

cd my-app

Step 3: Add the Syncfusion Grid package

All the Essential JS 2 NuGet packages are published in the npmjs.com registry.

To install the Data Grid component, use the following command.

npm install @syncfusion/ej2-angular-grids --save

The —save will instruct NPM to include the grid package inside of the dependencies section of the package.json.

#angular #datagrid #essential js 2 #syncfusion #web #javascript #web development