Enable Paging

Paging enables the widget to load and render data in portions. Remote data loaded using the CustomStore in raw mode and local data is only rendered one page at a time. In other cases, remote data is loaded and rendered one page at a time if the server can partition data.

Paging options are set in the DataSource: paginate enables paging; pageSize specifies how many data items a page should contain.

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: new DevExpress.data.DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        }),
        // ...
    });
});
Angular
TypeScript
HTML
import { DxSelectBoxModule } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
// ...
export class AppComponent {
    selectBoxData: any = {};
    constructor() {
        this.selectBoxData = new DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        });
    }
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule,
     ],
     // ...
 })
<dx-select-box ...
    [dataSource]="selectBoxData">
</dx-select-box>
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().SelectBox()
    .ID("selectBox")
    .DataSource(d => d
        // Data access is configured here
    )
    .DataSourceOptions(o => o
        .Paginate(true)
        .PageSize(10)
    )
)
See Also