Scroll Modes
The native Vue Grid by Kendo UI enables you to configure its layout modes.
You can set the following modes to the Grid:
Scrollable
When scrolling is enabled, the content of the Grid is rendered as tables—one for the header area, another one for the scrollable data area, and a third one for the footer area. This behavior ensures that the header and footer areas of the Grid are always visible while the user scrolls vertically.
The scrollable mode is enabled by default. To configure it, use the scrollable option, which also requires you to set the height of the Grid through its style property.
Conditional Scrolling
By configuring the style.maxHeight property, you can set the Grid in scrollable mode only when its rendered content exceeds certain height limits. If the content does not exceed the set maximum height, the height of the Grid will be the same as the height of its content.
Non-Scrollable
When the non-scrollable mode is enabled, the Grid renders its data as a single table and the scrollbar is not displayed. To configure the non-scrollable mode, set scrollable to none.
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.
Setup
To enable virtualization, simply set the Grid's height using the style property.
Optionally, you can further refine and customize virtualization behavior in the Grid by configuring the following props:
skip—Specifies the number of records to skip.take—Defines the number of records to display.total—Sets the total number of records.pageSize—Determines the number of records per page.rowHeight—Sets the height of each row.detailRowHeight—Sets the height of each detail row.
The following example demonstrates how to implement virtual scrolling in the Grid with a local dataset of 50,000 records. The Grid is configured with a rowHeight of 50 pixels and a height of 440 pixels. A pageSize of 25 controls how many records are rendered at a time, and the skip state is updated on each pagechange event to shift the visible window as the user scrolls.
Using Virtualization with Grouping
You can use virtual scrolling in combination with grouped data.
- Set the
groupableandgroupoptions of the Grid. - Set the
scrollableoption tovirtual. - Handle the emitted
onDatastatechangeevent. TheonDatastatechangeevent fires upon user interaction with the scrolling or changing the groups, and then processes the data and returns the data to the Grid.
To programmatically implement the processing of the data, either:
- Send a request to the server to execute the grouping on the server side, or
- Use the
processmethod of theDataQuerylibrary which automatically processes the data.
The Grid expects the grouped data to be a collection of GroupResults.
The following example demonstrates virtual scrolling combined with grouping by category. Data is processed locally using the process method from @progress/kendo-data-query. On onDatastatechange, the full dataset is re-processed only when the event is not a scroll (for example, when the user changes groups, sorts, or filters), keeping scrolling performant.
Using Virtualization with Detail Rows
You can also use DOM virtualization in combination with detail rows.
- Set the
detailto the detail component. - Set the
detailExpandprop to handle the expand state of the Grid internally. - Set the
onDetailexpandchange
The following example demonstrates the Detail Row virtualization in the Grid.
Using 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.
The following example demonstrates a Grid with 100 columns and 100,000 rows using both row and column virtualization. Odd-numbered columns are hidden via the hidden prop, and column 6 uses the media prop to render only on viewports wider than 800px.
Debouncing pageChange Events
When configured for virtualization, the Grid fires the onPageChange 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.
The following example fetches orders from a remote OData service as the user scrolls. A requestInProgress flag prevents overlapping requests, and each fetch also pre-loads the previous page to reduce visible loading gaps. Cells without data yet are rendered as Skeleton placeholders until the response arrives.
Infinite Scrolling
After the user scrolls to the end of the page, the Grid enables you to load more records by appending additional pages of data on demand. To implement the infinite scrolling feature, use the onScroll event and add more data once the user is near to the bottom of the Grid.
The following example demonstrates how to dynamically add data to the Grid while the user is scrolling.