DevExtreme React - Enable Paging

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>
Vue
App.vue
<template> 
    <DxSelectBox ...
        :data-source="selectBoxData"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';
import DataSource from "devextreme/data/data_source";

export default {
    components: {
        DxSelectBox
    },
    data() {
        const selectBoxData = new DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        }); 
        return {
            selectBoxData
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import SelectBox from 'devextreme-react/select-box';
import DataSource from "devextreme/data/data_source";

const selectBoxData = new DataSource({
    store: /* A store is configured here */,
    paginate: true,
    pageSize: 10
});  

class App extends React.Component {
    render() {
        return (
            <SelectBox ...
                dataSource={selectBoxData}
            />
        );
    }
}
export default App;
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)
    )
)

If the entire dataset is on the client (stored in a local array or loaded using the CustomStore in raw mode), data items are only rendered page by page.

If the dataset is on the server, and the server supports paging, the data items are also loaded by pages.

See Also