Your search did not match any results.
Data Grid

Infinite Scrolling

If the DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset.

To enable infinite scroll mode, set the scrolling.mode to "infinite".

In this demo, the DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.

Copy to CodeSandBox
Apply
Reset
<dx-data-grid id="gridContainer" [dataSource]="dataSource" [customizeColumns]="customizeColumns" [showBorders]="true"> <dxo-load-panel [enabled]="false"></dxo-load-panel> <dxo-scrolling mode="infinite"></dxo-scrolling> <dxo-sorting mode="none"></dxo-sorting> </dx-data-grid>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule } from 'devextreme-angular'; import { Service, Employee } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service] }) export class AppComponent { dataSource: any; constructor(service: Service) { this.dataSource = { store: service.generateData(100000) }; } customizeColumns(columns) { columns[0].width = 70; } } @NgModule({ imports: [ BrowserModule, DxDataGridModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #gridContainer { height: 440px; }
import { Injectable } from '@angular/core'; export class Employee { id: number; firstName: string; lastName: string; gender: string; birthDate: Date; } let employees: Employee[] = []; let surnames: string[] = [ "Smith", "Johnson", "Brown", "Taylor", "Anderson", "Harris", "Clark", "Allen", "Scott", "Carter"]; let names: string[] = [ "James", "John", "Robert", "Christopher", "George", "Mary", "Nancy", "Sandra", "Michelle", "Betty"]; let gender: string[] = ["Male", "Female"]; let s: number = 123456789; @Injectable() export class Service { random() { s = (1103515245 * s + 12345) % 2147483647; return s % (10 - 1); } generateData(count: number) { let i: number, startBirthDate = Date.parse("1/1/1975"), endBirthDate = Date.parse("1/1/1992"); for (i = 0; i < count; i++) { let birthDate = new Date(startBirthDate + Math.floor( this.random() * (endBirthDate - startBirthDate) / 10)); birthDate.setHours(12); let nameIndex = this.random(); let item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[this.random()], gender: gender[Math.floor(nameIndex / 5)], birthDate: birthDate }; employees.push(item); } return employees; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.4.5/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs', 'devextreme': 'npm:devextreme@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.14', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', 'devextreme-angular': 'npm:devextreme-angular@20.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, packageConfigPaths: [ "npm:*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular@20.1/*/package.json", "npm:devextreme-angular@20.1/ui/*/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>