Paging

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 Data Grid for Blazor splits large amount of data rows across multiple pages and displays a pager for data navigation. Use the PagerNavigationMode to specify how users navigate between pages. The following values are available:

  • InputBox - Users can type a page number in the Go to Page input box to navigate to the corresponding page.
  • NumericButtons - Users can click numeric buttons to navigate between pages.
  • Auto (Default) - If the number of pages is greater or equal to the PagerSwitchToInputBoxButtonCount value or the Data Grid is shown on small devices, the Go to Page input box is displayed. Otherwise, numeric buttons are displayed.

Use the PageSize property to specify the maximum number of rows that the Data Grid can display on a page. If PageSize is less than or equal to 0, all Data Grid rows are displayed on one page, and the pager is hidden.

Set the PagerPageSizeSelectorVisible property to true to display the page size selector. Once a user selects a new size in this selector, the PageSize property value is updated, and the Data Grid is redrawn. The selector consists of two parts:

  • A list of predefined page sizes. To fill this list, use the PagerAllowedPageSizes property. If the PageSize property value is not added to this list, the value is displayed in the selector's editor but not available in the selector's list.
  • The All item. To show it, set the PagerAllDataRowsItemVisible property to true. When a user selects this item, all grid rows are displayed on one page, and the pager is hidden.

The PageIndex property allows you to switch between Data Grid pages in code. The PageCount property specifies the total number of pages. To show or hide the pager, use the ShowPager property.

Vertical Scrolling

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

This demo module illustrates how to enable vertical scrolling in the DevExpress Data Grid for Blazor.

The Data Grid's height is determined by the number of rows displayed within a page. Use the DxDataGrid.VerticalScrollBarMode property to display the vertical scrollbar and reduce the Data Grid's height. Use the DxDataGrid.VerticalScrollableHeight property to specify the height of the scrollable area (in pixels).

The DxDataGrid.VerticalScrollBarMode property accepts the following values:

  • Auto - The scrollbar is automatically shown when the size of the component content exceeds the size of the component itself.
  • Hidden - The scrollbar is hidden.
  • Visible - The scrollbar is visible.

Horizontal Scrolling

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

This demo module illustrates how to enable horizontal scrolling in the DevExpress Data Grid for Blazor.

Specify the Width property for all Data Grid columns and use the DxDataGrid.HorizontalScrollBarMode property to specify the horizontal scrollbar’s display mode:

  • Auto - The scrollbar is automatically shown when the size of the component content exceeds the size of the component itself.
  • Hidden - The scrollbar is hidden.
  • Visible - The scrollbar is visible.

Fixed Columns

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 Data Grid allows you to anchor columns to their left or rightmost edge. Fixed columns can help improve data readability as columns fixed to the right or left remain visible when users scroll the grid horizontally. To fix a column, set its FixedStyle property to DataGridFixedStyle.Left or DataGridFixedStyle.Right.

Virtual Scrolling

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

Set the DataNavigationMode property to VirtualScrolling to enable virtual scrolling in our Data Grid. The Data Grid loads and renders only the data rows that become visible. Note that this mode requires that all rows have the same height.

In this mode, the Data Grid does not display the pager and opens the Edit Form in a pop-up window.