DevExtreme React - Enable Paging

Paging is used to load data in portions, which improves the widget's performance on large datasets. It is configured in the widget's DataSource. Enable paging by setting the paginate option to true, and specify the number of items per page using the pageSize option.

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: new DevExpress.data.DataSource({
            loadMode: "raw",   
            load: function () {
                return $.getJSON('https://mydomain.com/MyDataService');
            },
            paginate: true,
            pageSize: 5
        }),
        valueExpr: "Product_ID",
        displayExpr: "Product_Name"
    });
});
Angular
TypeScript
HTML
import { ..., Inject } from '@angular/core';
import { Http, HttpModule } from '@angular/http';
import { DxSelectBoxModule } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
import CustomStore from 'devextreme/data/custom_store';
// ...
export class AppComponent {
    selectBoxData: any = {};
    constructor(@Inject(Http) http: Http) {
        this.selectBoxData = new DataSource({
            store: new CustomStore({
                loadMode: "raw",
                load: function () {
                    return http.get("https://mydomain.com/MyDataService");
                },
            }),
            paginate: true,
            pageSize: 5
        });
    }
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule,
         HttpModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="selectBoxData"
    valueExpr="Product_ID"
    displayExpr="Product_Name">
</dx-select-box>
See Also