Paging

ID
680 HL Road Frame - Black, 58 Components Road Frames 6/1/2019
706 HL Road Frame - Red, 58 Components Road Frames 6/1/2019
707 Sport-100 Helmet, Red Accessories Helmets 6/1/2019
708 Sport-100 Helmet, Black Accessories Helmets 6/1/2019
709 Mountain Bike Socks, M Clothing Socks 6/1/2019
710 Mountain Bike Socks, L Clothing Socks 6/1/2019
711 Sport-100 Helmet, Blue Accessories Helmets 6/1/2019
712 AWC Logo Cap Clothing Caps 6/1/2019
713 Long-Sleeve Logo Jersey, S Clothing Jerseys 6/1/2019
714 Long-Sleeve Logo Jersey, M Clothing Jerseys 6/1/2019

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

680 HL Road Frame - Black, 58 Components Road Frames 6/1/2019
706 HL Road Frame - Red, 58 Components Road Frames 6/1/2019
707 Sport-100 Helmet, Red Accessories Helmets 6/1/2019
708 Sport-100 Helmet, Black Accessories Helmets 6/1/2019
709 Mountain Bike Socks, M Clothing Socks 6/1/2019
710 Mountain Bike Socks, L Clothing Socks 6/1/2019
711 Sport-100 Helmet, Blue Accessories Helmets 6/1/2019
712 AWC Logo Cap Clothing Caps 6/1/2019
713 Long-Sleeve Logo Jersey, S Clothing Jerseys 6/1/2019
714 Long-Sleeve Logo Jersey, M Clothing Jerseys 6/1/2019
715 Long-Sleeve Logo Jersey, L Clothing Jerseys 6/1/2019
716 Long-Sleeve Logo Jersey, XL Clothing Jerseys 6/1/2019
717 HL Road Frame - Red, 62 Components Road Frames 6/1/2019
718 HL Road Frame - Red, 44 Components Road Frames 6/1/2019
719 HL Road Frame - Red, 48 Components Road Frames 6/1/2019
720 HL Road Frame - Red, 52 Components Road Frames 6/1/2019
721 HL Road Frame - Red, 56 Components Road Frames 6/1/2019
722 LL Road Frame - Black, 58 Components Road Frames 6/1/2019
723 LL Road Frame - Black, 60 Components Road Frames 6/1/2019
724 LL Road Frame - Black, 62 Components Road Frames 6/1/2019
725 LL Road Frame - Red, 44 Components Road Frames 6/1/2019
726 LL Road Frame - Red, 48 Components Road Frames 6/1/2019
727 LL Road Frame - Red, 52 Components Road Frames 6/1/2019
728 LL Road Frame - Red, 58 Components Road Frames 6/1/2019
729 LL Road Frame - Red, 60 Components Road Frames 6/1/2019
730 LL Road Frame - Red, 62 Components Road Frames 6/1/2019
731 ML Road Frame - Red, 44 Components Road Frames 6/1/2019
732 ML Road Frame - Red, 48 Components Road Frames 6/1/2019
733 ML Road Frame - Red, 52 Components Road Frames 6/1/2019
734 ML Road Frame - Red, 58 Components Road Frames 6/1/2019

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

680 HL Road Frame - Black, 58 Components Road Frames 6/1/2019
706 HL Road Frame - Red, 58 Components Road Frames 6/1/2019
707 Sport-100 Helmet, Red Accessories Helmets 6/1/2019
708 Sport-100 Helmet, Black Accessories Helmets 6/1/2019
709 Mountain Bike Socks, M Clothing Socks 6/1/2019
710 Mountain Bike Socks, L Clothing Socks 6/1/2019
711 Sport-100 Helmet, Blue Accessories Helmets 6/1/2019
712 AWC Logo Cap Clothing Caps 6/1/2019
713 Long-Sleeve Logo Jersey, S Clothing Jerseys 6/1/2019
714 Long-Sleeve Logo Jersey, M Clothing Jerseys 6/1/2019

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

680 HL Road Frame - Black, 58 Components Road Frames 6/1/2019
706 HL Road Frame - Red, 58 Components Road Frames 6/1/2019
707 Sport-100 Helmet, Red Accessories Helmets 6/1/2019
708 Sport-100 Helmet, Black Accessories Helmets 6/1/2019
709 Mountain Bike Socks, M Clothing Socks 6/1/2019
710 Mountain Bike Socks, L Clothing Socks 6/1/2019
711 Sport-100 Helmet, Blue Accessories Helmets 6/1/2019
712 AWC Logo Cap Clothing Caps 6/1/2019
713 Long-Sleeve Logo Jersey, S Clothing Jerseys 6/1/2019
714 Long-Sleeve Logo Jersey, M Clothing Jerseys 6/1/2019

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

680 HL Road Frame - Black, 58 Components Road Frames 6/1/2019
706 HL Road Frame - Red, 58 Components Road Frames 6/1/2019
707 Sport-100 Helmet, Red Accessories Helmets 6/1/2019
708 Sport-100 Helmet, Black Accessories Helmets 6/1/2019
709 Mountain Bike Socks, M Clothing Socks 6/1/2019
710 Mountain Bike Socks, L Clothing Socks 6/1/2019
711 Sport-100 Helmet, Blue Accessories Helmets 6/1/2019
712 AWC Logo Cap Clothing Caps 6/1/2019
713 Long-Sleeve Logo Jersey, S Clothing Jerseys 6/1/2019
714 Long-Sleeve Logo Jersey, M Clothing Jerseys 6/1/2019

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.