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 Cabrales Dairy Products Paul Henriot (Vins et alcools Chevalier) France $14.00 12 $168.00
Singaporean Hokkien Fried Mee Grains/Cereals Paul Henriot (Vins et alcools Chevalier) France $10.00 10 $100.00
Mozzarella di Giovanni Dairy Products Paul Henriot (Vins et alcools Chevalier) France $35.00 5 $175.00
Tofu Produce Karin Josephs (Toms Spezialitäten) Germany $19.00 9 $171.00
Manjimup Dried Apples Produce Karin Josephs (Toms Spezialitäten) Germany $42.00 40 $1,680.00
Jack's New England Clam Chowder Seafood Mario Pontes (Hanari Carnes) Brazil $8.00 10 $80.00
Manjimup Dried Apples Produce Mario Pontes (Hanari Carnes) Brazil $42.00 35 $1,470.00
Louisiana Fiery Hot Pepper Sauce Condiments Mario Pontes (Hanari Carnes) Brazil $17.00 15 $255.00
Gustaf's Knäckebröd Grains/Cereals Mary Saveley (Victuailles en stock) France $17.00 6 $102.00
Ravioli Angelo Grains/Cereals Mary Saveley (Victuailles en stock) France $16.00 15 $240.00
Louisiana Fiery Hot Pepper Sauce Condiments Mary Saveley (Victuailles en stock) France $17.00 20 $340.00
Sir Rodney's Marmalade Confections Pascale Cartrain (Suprêmes délices) Belgium $65.00 40 $2,600.00
Geitost Dairy Products Pascale Cartrain (Suprêmes délices) Belgium $2.00 25 $50.00
Camembert Pierrot Dairy Products Pascale Cartrain (Suprêmes délices) Belgium $27.00 40 $1,080.00
Gorgonzola Telino Dairy Products Mario Pontes (Hanari Carnes) Brazil $10.00 20 $200.00
Chartreuse verte Beverages Mario Pontes (Hanari Carnes) Brazil $14.00 42 $588.00
Maxilaku Confections Mario Pontes (Hanari Carnes) Brazil $16.00 40 $640.00
Guaraná Fantástica Beverages Yang Wang (Chop-suey Chinese) Switzerland $4.00 15 $60.00
Pâté chinois Meat/Poultry Yang Wang (Chop-suey Chinese) Switzerland $19.00 21 $399.00
Data grid with 2158 rows and 7 columns

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.