$(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.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.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.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery SelectBox - Enable Paging

jQuery

Angular

Vue

React

ASP.NET MVC Controls

See Also