Pager

Demonstration and configuration of the Radzen Blazor Pager component.

In this demo a RadzenDataList displays Orders as cards with employee photos and shipping info, using a standalone RadzenPager with ShowPagingSummary="true", custom PagingSummaryFormat, PageNumbersCount="5" visible page numbers, and PageChanged event to load data for the selected page.

Pager Density link

Use the Density property to change the size and density of the pager - Density="Density.Compact".

Density:

Keyboard Navigation link

The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Pager component.

Press this key To do this
Tab Navigate to a Pager component.
LeftArrow Focus previous Pager page.
RightArrow Focus next Pager page.
Enter or Space Go to the focused Pager page.
✨ 오늘의 명언 & 마음의 양식

“언제나 불가능해 보이던 일도 이루어지기 전까지는 그렇다.”

— 넬슨 만델라 (남아프리카 공화국의 정치가, 인권 운동가)
On this page

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙