Paging

The Grid is currently available as a community technology preview (CTP).
 
Ship Name Ship City Ship Postal Code Ship Country Freight Order Date Shipped Date
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

The DevExpress Blazor Grid can split data rows across multiple pages and displays a pager to enable data navigation between pages. Use the PagerNavigationMode property to specify how users navigate among 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 (All dropdown list item).

Vertical Scrolling

The Grid is currently available as a community technology preview (CTP).
 
Ship Name Ship City Ship Postal Code Ship Country Freight Order Date Shipped Date
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
GROSELLA-Restaurante Caracas 1081 Venezuela 66 7/30/2014 8/2/2014
White Clover Markets Seattle 98124 USA 5 7/31/2014 8/9/2014
Wartian Herkku Oulu 90110 Finland 137 8/1/2014 8/2/2014
Split Rail Beer & Ale Lander 82520 USA 5 8/1/2014 8/30/2014
Rattlesnake Canyon Grocery Albuquerque 87110 USA 98 8/2/2014 8/6/2014
QUICK-Stop Cunewalde 01307 Germany 76 8/5/2014 8/12/2014
Vins et alcools Chevalier Reims 51100 France 6 8/6/2014 8/16/2014
Magazzini Alimentari Riuniti Bergamo 24100 Italy 27 8/7/2014 8/9/2014
Tortuga Restaurante México D.F. 05033 Mexico 14 8/8/2014 8/14/2014
Morgenstern Gesundkost Leipzig 04179 Germany 126 8/9/2014 8/13/2014

The DevExpress Blazor Grid displays a vertical scrollbar when Grid content height exceeds the specified height of the component itself.

In this demo, the Grid contains 30 rows on a page (the PageSize property is set to 30), but overall Grid height is limited.

Horizontal Scrolling

The Grid is currently available as a community technology preview (CTP).
 
Ship Name Ship Address Ship City Ship Postal Code Ship Country Freight Order Date Shipped Date
Vins et alcools Chevalier 59 rue de l'Abbaye Reims 51100 France 32 7/4/2014 7/16/2014
Toms Spezialitäten Luisenstr. 48 Münster 44087 Germany 12 7/5/2014 7/10/2014
Hanari Carnes Rua do Paço, 67 Rio de Janeiro 05454-876 Brazil 66 7/8/2014 7/12/2014
Victuailles en stock 2, rue du Commerce Lyon 69004 France 41 7/8/2014 7/15/2014
Suprêmes délices Boulevard Tirou, 255 Charleroi B-6000 Belgium 51 7/9/2014 7/11/2014
Hanari Carnes Rua do Paço, 67 Rio de Janeiro 05454-876 Brazil 58 7/10/2014 7/16/2014
Chop-suey Chinese Hauptstr. 31 Bern 3012 Switzerland 23 7/11/2014 7/23/2014
Richter Supermarkt Starenweg 5 Genève 1204 Switzerland 148 7/12/2014 7/15/2014
Wellington Importadora Rua do Mercado, 12 Resende 08737-363 Brazil 14 7/15/2014 7/17/2014
HILARION-Abastos Carrera 22 con Ave. Carlos Soublette #8-35 San Cristóbal 5022 Venezuela 82 7/16/2014 7/22/2014

Our Blazor Grid displays a horizontal scrollbar when the total width of all columns exceeds the specified width of the component itself.