Virtualized Columns
The Telerik Blazor Grid provides Virtual Scrolling for its Columns. This means that columns and the corresponding data will be rendered only for the currently visible viewport. When changing the Page or Sorting the Grid, fewer elements are rendered which improves the responsiveness and the overall user experience.
This article provides the following sections:
Basics
The targeted scenario is for a Grid with big number of columns, since the performance improvement will be most significant there.
To enable Virtualized Columns:
- Set the
ColumnVirtualizationparameter of the Grid totrue. - Set the
Widthparameter of all columns inpxso that the total sum is greater than theWidthof the Grid.- This will enable horizontal scrollbar which is required. You can read more about the scrolling behavior of the grid in the Grid Column Width Behavior article.
- Set the
RowHeightso that the content of all cells fits in the row. For more information see the Notes section. - Set the
Heightof the Grid inpx. For more information see the Notes section. - Set the
Widthparameter of the Grid inpx.
Basic setup of the Virtualized Columns
Notes
- The
RowHeightmust accommodate the height of all the possible cells and their content in order to ensure good appearance. If certain cells that are not rendered have content that is taller than the rendered ones, you may experience glitches and unstable scrolling.- If the row/cell height the browser would render is larger than the
RowHeightvalue due to the cell contents, the browser will ignore theRowHeight. The actual cell height can depend on the chosen Theme or other CSS rules, or on cell data that falls on more than one line. Inspect the rendered HTML to make sure the grid setting matches the rendering.
- If the row/cell height the browser would render is larger than the
- The
Heightof the Grid must be explicitly set inpx. By default the Height is set by the browser depending on the contents. When a new column is rendered during horizontal scrolling, it might increase or decrease the vertical size of the row and cause issues with the rendering and abnormal visual behavior for the users. - Rendering the Virtual Columns in Client-side Blazor Applications is slower due to the Framework rendering limitations. In the Server-side Applications this issue is not present.
More Examples
The column virtualization can work together with other similar features in the grid:
Virtualized Columns and Rows
You can use Virtualized Columns and Rows together. More information on Virtual Rows can be found in the Virtual Scrolling article.
Use Virtualized Columns and Rows together
Virtualized Autogenerated Columns
Column virtualization is commonly used when you have many columns. You may not have to declare them yourself, the grid can do this for you through its Automatically Generated Columns feature.
In order to add Virtualized Autogenerated Columns, the
ColumnWidthparameter must be set in pixels.