Paging

The native Vue Grid by Kendo UI enables you to split its content into pages.

Getting Started

To enable paging:

  1. Set the pageable, pageSize, and skip options of the Grid. As a result, the Grid renders a paging UI navigation to the bottom of the Grid and enhances user interaction.
  2. Handle the emitted onPageChange event. The onPageChange event fires when the user interacts with the Grid through the pager, then processes the data, and returns the requested page to the Grid. To implement the processing of the data programmatically, send a request to the server to execute the paging on server-side, or use the process method of the DataQuery library which automatically processes the data.

The following example demonstrates the minimum required configuration for paging the Grid records.

<div id="vueapp" class="vue-app">
    <Grid :style="{height: '450px'}"
          :data-items="result"
          :pageable="true"
          :skip= "skip"
          :take="take"
          :total="total"
          :columns = "columns"
          @pagechange="pageChangeHandler">
    </Grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('Grid', Grid);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            dataItems: [],
            skip: 0,
            take: 10,
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ]
        };
    },
    computed: {
        result: {
            get: function() {
                return this.dataItems.slice(this.skip, this.take + this.skip);
            }
        },
        total () {
            return this.dataItems ? this.dataItems.length : 0;
        }
    },
    methods: {
        pageChangeHandler: function(event) {
            this.skip = event.page.skip;
            this.take = event.page.take;
        },
        createRandomData(count) {
            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]

            return Array(count).fill({}).map((_, idx) => ({
                ProductID: idx + 1,
                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
            }));
        }
    },
    mounted() {
        this.dataItems = this.createRandomData(1000);
    }
});

Pager Types

The pager types of the Grid are:

  • Numeric—Renders buttons with numbers.
  • Input—Renders an input field for typing the page number.

To set the pager types, pass the PagerSettings object to the pageable option of the Grid.

The PagerSettings object has the following fields:

  • buttonCount—Sets the maximum numeric buttons count before the buttons are collapsed.
  • info—Toggles the information about the current page and the total number of records.
  • type—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizes—Shows a menu for selecting the page size.
  • previousNext—Toggles the Previous and Next buttons.
<div id="vueapp" class="vue-app">
    <div class="example-config row">
        <div class="col-md-6">
            <dl>
                <dt>
                    Pager type:
                </dt>
                <dd>
                    <input
                        type="radio"
                        name="pager"
                        id="numeric"
                        class="k-radio"
                        value="numeric"
                        checked='true'
                        @change="changeHandler('type', $event.target.value)"/>
                    <label
                        :style="{ margin: '7px 3em 7px 0px', lineHeight: '1.2' }"
                        class="k-radio-label"
                        for="numeric">
                        Numeric
                    </label>

                    <input
                        type="radio"
                        name="pager"
                        id="input"
                        class="k-radio"
                        value="input"
                        @change="changeHandler('type', $event.target.value)"/>
                    <label
                        :style="{ margin: '7px 3em 7px 0px', lineHeight: '1.2' }"
                        class="k-radio-label"
                        for="input">
                        Input
                    </label>
                </dd>
            </dl>
            <dl>
                <dt>
                    Max. number of buttons:
                </dt>
                <dd>
                    <input
                        defaultValue="5"
                        class="k-textbox"
                        type="number"
                        @change="changeHandler('buttonCount', $event.target.valueAsNumber)"/>
                </dd>
            </dl>
        </div>
        <div class="col-md-6 row">
            <div class="col-md-12">
                <input
                    class="k-checkbox"
                    checked='true'
                    id="showInfo"
                    type="checkbox"
                    @change="changeHandler('info', $event.target.checked)"/>
                <label for="showInfo" class="k-checkbox-label">
                    Show info
                </label>
            </div>
            <div class="col-md-12">
                <input
                    class="k-checkbox"
                    checked='true'
                    id="pageSize"
                    type="checkbox"
                    @change="changeHandler('pageSizes', $event.target.checked)"/>
                <label for="pageSize" class="k-checkbox-label">
                    Show page sizes
                </label>
            </div>
            <div class="col-md-12">
                <input
                    class="k-checkbox"
                    checked='true'
                    id="previousNext"
                    type="checkbox"
                    @change="changeHandler('previousNext',$event.target.checked)"/>
                <label for="previousNext" class="k-checkbox-label">
                    Show previous / next buttons
                </label>
            </div>
        </div>
    </div>
    <Grid :style="{height: '340px'}"
          :data-items="items"
          :skip= "skip"
          :take="take"
          :total="total"
          :pageable="pageable"
          :page-size="pageSize"
          @pagechange="pageChangeHandler"
          :columns = "columns">
    </Grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('Grid', Grid);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            dataItems: [],
            skip: 0,
            take: 10,
            pageSize: 10,
            pageable: {
                buttonCount: 5,
                info: true,
                type: 'numeric',
                pageSizes: true,
                previousNext: true
            },
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ]
        };
    },
    computed: {
        items: {
            get: function() {
                return this.dataItems.slice(this.skip, this.take + this.skip);
            }
        },
        total () {
            return this.dataItems ? this.dataItems.length : 0;
        }
    },
    methods: {
        pageChangeHandler: function(event) {
            this.skip = event.page.skip;
            this.take = event.page.take;
        },
        updatePagerState: function(key, value) {
            const newPageableState = Object.assign({}, this.pageable, { [key]: value });
            this.pageable = newPageableState;
        },
        changeHandler: function(type, value) {
            this.updatePagerState(type, value);
        },
        createRandomData(count) {
            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]

            return Array(count).fill({}).map((_, idx) => ({
                ProductID: idx + 1,
                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
            }));
        }
    },
    mounted() {
        this.dataItems = this.createRandomData(1000);
    }
});

In this article