Virtual Scrolling
Virtual scrolling provides an alternative to paging.
While the user is scrolling the table, the Angular Grid requests and displays only the visible pages. To define the virtual scrolling functionality, set scrollable to virtual.
Generally, to determine when a pageChange event has to be fired so that the Grid obtains and displays the next or the previous portion (page) of data items, the virtual scrolling functionality of the Grid relies on calculations that are based on the fixed and equal height of the rows, the set or internally calculated pageSize of the Grid, and the scrollTop position of the scrollable data table container. In master-detail scenarios, you have to predefine the detailRowHeight to ensure the proper functioning of the data virtualization, loading, and rendering of the correct items.
Getting Started
To configure the Grid for virtual scrolling:
- Set its height either through its
heightinput or through thestyleproperty. - Set the detail row height (if detail rows are present) and the number of records.
To work properly, virtual scrolling requires you to set the following configuration options:
- (Required)
scrollable—Set it tovirtual. - (Required)
height - (Optional)
detailRowHeight—Set thedetailRowHeightoption only when you use detail rows. - (Optional)
rowHeight—Has to represent the actualheightof each Grid row (tr) element in the DOM. The providedrowHeightnumber is used for internal calculations and does not set the row height of the Grid. If not set, the Grid will calculate its row height automatically. - (Optional)
pageSize—Use this property to set a specific page size. If not set, the Grid will calculate its page size internally, based on the heights of the rows and the Grid's scrollable container.
Virtualization with Local Data
Virtualization with Remote Data
When the Grid loading option is set to true and the virtualization functionality is enabled, a default loading skeleton indicating an ongoing data-loading operation is displayed in each data cell.
The purpose of this loading skeleton is to avoid potential confusion related to displaying the data items from the previous data range, while the new range of items is being retrieved and rendered.
The following example demonstrates the virtualization of remote data, and the default loading skeleton in action.
Custom Loading Skeleton
To customize the content of the Grid data cells while loading new data and replace the default loading skeleton, use the CellLoadingTemplateDirective.
The following example demonstrates how to render a different loading skeleton based on the type of the column content.
Virtualization with Grouping
You can use virtual scrolling in combination with grouped data by utilizing the kendoGridGroupBinding directive. The directive supports only the processing of in-memory data and you have to provide the full set of data that will be processed.
Starting from
v15.3.0, the Grid supports thecollapseGroupandexpandGroupmethods when thekendoGridGroupBindingdirective is applied.
Please check the section on known limitations applicable to the Grid virtual scrolling functionality before using it.
Programmatically Expanding or Collapsing a Specific Group
You can programmatically expand or collapse a specific group inside a Grid with virtual scrolling enabled by using the built-in expandGroup() and collapseGroup() methods. The two methods accept as an argument the index of the specific group both in root or hierarchical format and modify its expanded state accordingly.
The following example demonstrates how to programmatically expand and collapse the first group of a Grid with virtual scrolling enabled.
Controlling the Expanded State of All Root Level Groups
To programmatically control the expanded state of all root level groups inside a Grid with virtualization enabled, use the built-in expandAll() and collapseAll() methods that the kendoGridGroupBinding directive provides.
The following example demonstrates how to programmatically expand and collapse all root level groups in a virtual scrolling Grid.
Virtualization with Responsive Columns
The virtual scrolling functionality requires that all Grid rows have an equal, predefined height. However, you can still keep virtual scrolling and use responsive columns which have different cell templates based on the column width.
Debouncing pageChange Events
When configured for virtualization, the Grid fires the pageChange event as often as possible. This behavior allows for a smoother scrolling experience when the data is available in memory.
If the data is requested from a remote service, it is advisable to debounce or otherwise limit the page changes.
Known Limitations
- When using both the
kendoGridGroupBindingand akendoGridGroupFooterTemplate, set theshowFooterproperty of the Gridgroupableoption totrue. - The Grid's virtual scrolling may be affected by browser-specific limitations in terms of the maximum height of the container element. Values higher than the browser limit cannot ensure reliable vertical scrolling and the scrollbar's thumb may seem immovable.