Virtual Scrolling

8 Jun 20173 minutes to read

The ListBox component provides support to load its data on demand via scrolling behavior to improve the application’s performance. This can be achieved using allowVirtualScrolling property. There are two ways to load data based on the scrolling type.

Normal scrolling
Continuous Scrolling

The scrolling type can be defined via virtualScrollMode property.

Normal Scrolling

This mode allows you to load the list box data while scrolling i.e. each time the scroll bar is scrolled, it will send request to the server to load the data.

JAVASCRIPT

<div id="controlitem">
            <ej-listbox id="selectExperts" [dataSource]="dataManger" [query]="query" [allowMultiSelection]="true" [fields]="fieldList"
            [allowVirtualScrolling]="true"></ej-listbox>
        </div>

export class VirtualScrollingComponent {
    dataManger: any;
    query: any;
    fieldList: object;
    constructor() {
        this.dataManger = ej.DataManager({ url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/' });
        this.query = ej.Query().from('Customers');
        this.fieldList = { text: "CustomerID" };  
    }
}

NOTE

By default, the value of “virtualScrollMode” property is normal.

Alt text

Continuous Scrolling

This mode allows you to load the list box data when the scrollbar reaches the end point. In this mode, we can specify the number of items to be loaded per request.

The number of items to be loaded per request can be specified using the “itemRequestCount” property.

HTML

<div id="controlitem">
            <ej-listbox id="selectExperts" [dataSource]="dataManger" [query]="query" [allowMultiSelection]="true" [fields]="fieldList"
            [allowVirtualScrolling]="true" [virtualScrollMode]="virtualmode"></ej-listbox>
</div>

export class appComponent {
    dataManger: any;
    query: any;
    fieldList: object;
    virtualmode: any;
    constructor() {
        this.dataManger = ej.DataManager({ url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/' });
        this.query = ej.Query().from('Customers');
        this.fieldList = { text: "CustomerID" };  
        this.virtualmode = ej.VirtualScrollMode.Continuous;
    }
}

NOTE

The “itemRequestCount” property will work only when “virtualScrollMode” is “continuous”.

Alt text