All Components

Pager Overview

The Pager helps you split content into pages.

The Pager wrapper for Vue is a client-side wrapper for the Kendo UI Pager widget.

Basic Usage

The following example demonstrates the Pager in action.

<div id="vueapp" class="vue-app">
    <kendo-datasource :page-size="10" ref="datasource1"
      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
      :transport-read-data-type="'jsonp'" >
    </kendo-datasource>

    <kendo-pager :data-source-ref="'datasource1'"
                 :input="true"
                 :page-sizes="false"
                 @change="onChange">
    </kendo-pager>
</div>
Vue.use(ListViewInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    mounted () {
        this.$refs.datasource1.kendoDataSource.read();
    },
    methods: {
        onChange () {
            console.log("Event :: change")
            console.log(this.$refs.datasource1.kendoDataSource.view().toJSON())
        }
    }
})
In this article