• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
New to Kendo UI for Vue? Start a free 30-day trial


The Pager emits pageChange and pageSizeChange events.

Handling the Events

To process the data when the Pager current page is changed, handle the pageChange event that exposes the skip and take values, necessary for obtaining the desired items.

The pageSizeChange event is triggered when selecting a new value from the PageSizes dropdown.

View Source
Change Theme:

Preventing the PageSizeChange Event

In some scenarios it may prove useful to prevent the Pager pageSizeChange event, and perform some custom logic.

The following example demonstrates how to open a confirmation dialog when the page size is greater than some arbitrary value, set by the developer, as displaying so many items could cause performance issues.

View Source
Change Theme: