Vertical Scrolling

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

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

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.
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

Horizontal Scrolling

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

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.
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

Fixed Columns

Our Blazor Data Grid allows you to anchor columns to its 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.

HL Road Frame - Black, 58 Components Road Frames 6/1/2019
HL Road Frame - Red, 58 Components Road Frames 6/1/2019
Sport-100 Helmet, Red Accessories Helmets 6/1/2019
Sport-100 Helmet, Black Accessories Helmets 6/1/2019
Mountain Bike Socks, M Clothing Socks 6/1/2019
Mountain Bike Socks, L Clothing Socks 6/1/2019
Sport-100 Helmet, Blue Accessories Helmets 6/1/2019
AWC Logo Cap Clothing Caps 6/1/2019
Long-Sleeve Logo Jersey, S Clothing Jerseys 6/1/2019
Long-Sleeve Logo Jersey, M Clothing Jerseys 6/1/2019

Virtual Scrolling

The Data Grid supports virtual scrolling that allows end-users to navigate through grid rows using the vertical scrollbar much faster. Use the DataNavigationMode property to activate virtual scrolling.

This property accepts the following values:

  • Paging - Users navigate through the data rows with the help of a pager.
  • ShowAllDataRows – All grid rows are displayed on one page. In this mode, the grid does not display the pager.
  • VirtualScrolling - Enables virtual scrolling. Users navigate through data rows using the vertical scrollbar. When a user scrolls, the Data Grid fetches and renders data rows that become visible. In this mode, the Data Grid uses popup windows for data edit and insertion.

In this demo, the DataNavigationMode property is set to DataGridNavigationMode.VirtualScrolling.

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

Paging

The DevExpress Data Grid for Blazor splits large amount of data rows across multiple pages and displays a pager for data navigation. Use the following properties to set up the pager:

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