Paging

 
of 42
Ship Name Ship City Ship Postal Code Ship Country Freight Order Date Shipped Date
Vins et alcools ChevalierReims51100France327/4/20147/16/2014
Toms SpezialitätenMünster44087Germany127/5/20147/10/2014
Hanari CarnesRio de Janeiro05454-876Brazil667/8/20147/12/2014
Victuailles en stockLyon69004France417/8/20147/15/2014
Suprêmes délicesCharleroiB-6000Belgium517/9/20147/11/2014
Hanari CarnesRio de Janeiro05454-876Brazil587/10/20147/16/2014
Chop-suey ChineseBern3012Switzerland237/11/20147/23/2014
Richter SupermarktGenève1204Switzerland1487/12/20147/15/2014
Wellington ImportadoraResende08737-363Brazil147/15/20147/17/2014
HILARION-AbastosSan Cristóbal5022Venezuela827/16/20147/22/2014
Ernst HandelGraz8010Austria1417/17/20147/23/2014
Centro comercial MoctezumaMéxico D.F.05022Mexico37/18/20147/25/2014
Ottilies KäseladenKöln50739Germany557/19/20147/29/2014
Que DelíciaRio de Janeiro02389-673Brazil37/19/20147/30/2014
Rattlesnake Canyon GroceryAlbuquerque87110USA487/22/20147/25/2014
Ernst HandelGraz8010Austria1467/23/20147/31/2014
Folk och fä HBBräckeS-844 67Sweden47/24/20148/23/2014
Blondel père et filsStrasbourg67000France557/25/20148/12/2014
Wartian HerkkuOulu90110Finland267/26/20147/31/2014
FrankenversandMünchen80805Germany2097/29/20148/6/2014
Data grid with 830 rows and 7 columns
0 rows are selected
of 42

The DevExpress Blazor Grid can split data into pages and display a built-in navigation control - a pager. A vertical/horizontal scrollbar also appears if content height/width exceed component size.

Use the PagerNavigationMode property to specify how users navigate between pages. The following values are available:

  • InputBox — The pager includes an input box. Users can enter the desired page value within it.
  • NumericButtons — The pager includes numeric buttons.
  • Auto (default) — If the number of pages is greater than or equal to the PagerSwitchToInputBoxButtonCount value or the Grid is displayed on small devices, the pager displays an input box. Otherwise, numeric buttons are displayed.

The Grid also includes the following paging-related customization options:

  • PageSize — Specifies the maximum number of rows displayed on a page.
  • PageIndex — Specifies the current page index.
  • PagerPosition — Specifies pager position (at the bottom, at the top, or both at the bottom and the top).
  • PagerVisibleNumericButtonCount — Specifies the maximum number of numeric buttons displayed in the pager.
  • PagerAutoHideNavButtons — Specifies whether the pager's arrow navigation buttons are hidden when all numeric buttons are displayed.
  • PagerVisible — Specifies whether the Grid displays the pager.

Our Blazor Grid also allows users to change the page size dynamically at runtime. To display the page size selector, enable the PageSizeSelectorVisible option. Use the PageSizeSelectorItems property to specify predefined page sizes (available in a drop-down list). You can also enable the PageSizeSelectorAllRowsItemVisible option to display all Grid rows on one page (the All dropdown item).

In this demo, the Grid contains 20 rows on a page (the PageSize property is set to 20), but the overall Grid height is limited by a CSS rule. You can use keyboard shortcuts to navigate between pages. Focus the pager area and press the Left Arrow/Right Arrow to go to the previous/next page. To open the first/last page, focus the pager area and press Home/End.