New to Kendo UI for Angular? Start a free 30-day trial

Virtual Scrolling

Virtual scrolling provides an alternative to paging.

While the user is scrolling the table, the 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 rowHeight of the rows, the set pageSize of the Grid, and the scrollTop position of the scrollable data table container. In master-detail scenarios, you have to predefine both rowHeight and 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:

  1. Set its height either through its height input or through the style property.
  2. Set the regular or detail row height and the number of records.
  3. Provide the data for each page through the pageChange event handler.

To work properly, virtual scrolling requires you to set the following configuration options:

  • (Required) scrollableSet it to virtual.
  • (Required) height
  • (Required) rowHeightHas to represent the actual height of each Grid row (tr) element in the DOM. The provided rowHeight number is used for internal calculations and does not set the row height of the Grid.
  • (Required) skip
  • (Required) pageSizeTo avoid unexpected behavior during scrolling, set pageSize to at least three times the number of the visible Grid elements. The number of the visible Grid elements is determined by the height and rowHeight settings of the Grid.
  • (Required) dataInstruct the data option to use GridDataResult with the configured total field.
  • (Optional) detailRowHeightSet the detailRowHeight option only when you use detail rows.

Virtualization with Local Data

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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. The Grid collapseGroup and expandGroup methods are not supported when the directive is applied.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme: