|
|
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|
| Vins et alcools Chevalier | Reims | 51100 | France | 32 | 7/4/2014 | 7/16/2014 | |
| Toms Spezialitäten | Münster | 44087 | Germany | 12 | 7/5/2014 | 7/10/2014 | |
| Hanari Carnes | Rio de Janeiro | 05454-876 | Brazil | 66 | 7/8/2014 | 7/12/2014 | |
| Victuailles en stock | Lyon | 69004 | France | 41 | 7/8/2014 | 7/15/2014 | |
| Suprêmes délices | Charleroi | B-6000 | Belgium | 51 | 7/9/2014 | 7/11/2014 | |
| Hanari Carnes | Rio de Janeiro | 05454-876 | Brazil | 58 | 7/10/2014 | 7/16/2014 | |
| Chop-suey Chinese | Bern | 3012 | Switzerland | 23 | 7/11/2014 | 7/23/2014 | |
| Richter Supermarkt | Genève | 1204 | Switzerland | 148 | 7/12/2014 | 7/15/2014 | |
| Wellington Importadora | Resende | 08737-363 | Brazil | 14 | 7/15/2014 | 7/17/2014 | |
| HILARION-Abastos | San Cristóbal | 5022 | Venezuela | 82 | 7/16/2014 | 7/22/2014 | |
| Ernst Handel | Graz | 8010 | Austria | 141 | 7/17/2014 | 7/23/2014 | |
| Centro comercial Moctezuma | México D.F. | 05022 | Mexico | 3 | 7/18/2014 | 7/25/2014 | |
| Ottilies Käseladen | Köln | 50739 | Germany | 55 | 7/19/2014 | 7/29/2014 | |
| Que Delícia | Rio de Janeiro | 02389-673 | Brazil | 3 | 7/19/2014 | 7/30/2014 | |
| Rattlesnake Canyon Grocery | Albuquerque | 87110 | USA | 48 | 7/22/2014 | 7/25/2014 | |
| Ernst Handel | Graz | 8010 | Austria | 146 | 7/23/2014 | 7/31/2014 | |
| Folk och fä HB | Bräcke | S-844 67 | Sweden | 4 | 7/24/2014 | 8/23/2014 | |
| Blondel père et fils | Strasbourg | 67000 | France | 55 | 7/25/2014 | 8/12/2014 | |
| Wartian Herkku | Oulu | 90110 | Finland | 26 | 7/26/2014 | 7/31/2014 | |
| Frankenversand | München | 80805 | Germany | 209 | 7/29/2014 | 8/6/2014 | |
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 exceeds the size of the component.
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. Keyboard navigation is enabled and you can use keyboard shortcuts to navigate between pages. Focus the pager area and press the Arrow Left/Arrow Right to go to the previous/next page. To open the first/last page, focus the pager area and press Home/End.