• 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

PagerProps

The pager settings of the Grid (see example).


<Grid :pageable="{buttonCount: 2,info: false}">
</Grid>
NameTypeDefaultDescription

ariaControls?

string

Defines the id of the element that is being controlled by the pager - for example a Grid.

buttonCount?

number

Sets the maximum numeric buttons count before the buttons are collapsed.

info?

boolean

Toggles the information about the current page and the total number of records.

messagesMap?

(messageKey: string) => { defaultMessage: string; messageKey: string; }

A map with the messages.

onPagechange?

(event: any) => any

The event that is emited when the page is changed.

onPagesizechange?

(event: any) => any

The event that is emited when the page size is changed.

pagerRender?

any

pageSize

number

pageSizes?

boolean | number[]

Shows a menu for selecting the page size.

pageSizeValue?

string | number

Sets the selected value of the page size Dropdownlist. It is useful when the selected value could also be a string not only a number.

previousNext?

boolean

Toggles the Previous and Next buttons.

responsive?

boolean

Defines if the pager will be responsive. Defaults to true.

settings?

boolean | GridPagerSettings

size?

"null" | string

medium

Configures the size of the Pager.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size class.

skip

number

take

number

total

number

type?

string

Defines the type of the Grid pager.

width?

string | number