DevExtreme Angular - Enable Paging

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

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>

Local arrays and remote datasets loaded using the CustomStore in raw mode are only rendered page by page. In other cases, remote datasets are also loaded page by page if the server can partition data.

See Also