All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery TagBox - Enable Paging

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

jQuery
JavaScript
$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: new DevExpress.data.DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        }),
        // ...
    });
});
Angular
HTML
TypeScript
<dx-tag-box ...
    [dataSource]="tagBoxData">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    tagBoxData: DataSource = {};
    constructor() {
        this.tagBoxData = new DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        });
    }
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule,
     ],
     // ...
 })
Vue
<template>
    <DxTagBox ...
        :data-source="dataSource"
    />
</template>

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

import { DxTagBox } from 'devextreme-vue/tag-box';
import DataSource from "devextreme/data/data_source";

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

import { TagBox } from 'devextreme-react/tag-box';
import DataSource from "devextreme/data/data_source";

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

class App extends React.Component {
    render() {
        return (
            <TagBox ...
                dataSource={dataSource}
            />
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().TagBox()
    .ID("tagBox")
    .DataSource(d => d
        // Data access is configured here
    )
    .DataSourceOptions(o => o
        .Paginate(true)
        .PageSize(10)
    )
)

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