Virtual Scrolling

 
Order Date
Product Name Category Customer Country Unit Price Quantity Total
Order Date: 2014 (Count: 405, Sum of Total: $226,132.00)
Queso CabralesDairy ProductsPaul Henriot (Vins et alcools Chevalier)France$14.0012$168.00
Singaporean Hokkien Fried MeeGrains/CerealsPaul Henriot (Vins et alcools Chevalier)France$10.0010$100.00
Mozzarella di GiovanniDairy ProductsPaul Henriot (Vins et alcools Chevalier)France$35.005$175.00
TofuProduceKarin Josephs (Toms Spezialitäten)Germany$19.009$171.00
Manjimup Dried ApplesProduceKarin Josephs (Toms Spezialitäten)Germany$42.0040$1,680.00
Jack's New England Clam ChowderSeafoodMario Pontes (Hanari Carnes)Brazil$8.0010$80.00
Manjimup Dried ApplesProduceMario Pontes (Hanari Carnes)Brazil$42.0035$1,470.00
Louisiana Fiery Hot Pepper SauceCondimentsMario Pontes (Hanari Carnes)Brazil$17.0015$255.00
Gustaf's KnäckebrödGrains/CerealsMary Saveley (Victuailles en stock)France$17.006$102.00
Ravioli AngeloGrains/CerealsMary Saveley (Victuailles en stock)France$16.0015$240.00
Louisiana Fiery Hot Pepper SauceCondimentsMary Saveley (Victuailles en stock)France$17.0020$340.00
Sir Rodney's MarmaladeConfectionsPascale Cartrain (Suprêmes délices)Belgium$65.0040$2,600.00
GeitostDairy ProductsPascale Cartrain (Suprêmes délices)Belgium$2.0025$50.00
Camembert PierrotDairy ProductsPascale Cartrain (Suprêmes délices)Belgium$27.0040$1,080.00
Gorgonzola TelinoDairy ProductsMario Pontes (Hanari Carnes)Brazil$10.0020$200.00
Chartreuse verteBeveragesMario Pontes (Hanari Carnes)Brazil$14.0042$588.00
MaxilakuConfectionsMario Pontes (Hanari Carnes)Brazil$16.0040$640.00
Guaraná FantásticaBeveragesYang Wang (Chop-suey Chinese)Switzerland$4.0015$60.00
Pâté chinoisMeat/PoultryYang Wang (Chop-suey Chinese)Switzerland$19.0021$399.00
Data grid with 2158 rows and 7 columns
0 rows are selected

The scrollbar appears automatically if content does not fit the component container.

To enable vertical virtual scrolling, set our Blazor Grid's VirtualScrollingEnabled property to true . In this mode, users can scroll through all data rows without paging. To improve overall performance, the Grid renders a small number of rows on-screen (based on viewport size). For server-side data, our Grid component requests data in small chunks (when the user scrolls the component).

To make a row visible, can call the following methods:

In this demo, the Grid height is limited to 480 pixels. The TextWrapEnabled property is disabled and every row in the Grid has the same height. When text does not fit into a cell as a single line, the Grid trims extra words and displays an ellipsis. You can hover over the cell to display all the text in a tooltip.

Check the Enable Text Wrap check box above the Grid component to enable the word wrap option. Once enabled, a cell will display multiple lines of text when its value does not fit into the cell as a single line.