Scroll Modes Basics
The Grid provides options for rendering its content in a scrollable or non-scrollable mode by configuring its scrollable property.
You can also enable the virtual scroll mode of the Grid by setting scrollable to virtual. For more information, refer to the article on virtual scrolling.
Scrollable Mode
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.
Getting Started
The scrollable mode of the Grid is enabled by default. You can configure the scrollable behavior through the scrollable option.
By default, the Grid is as high as its content and as wide as the available space. To configure the height of the Grid, either set its height input or use the style HTML property. To configure the width of the Grid, use the style HTML property. If the height or width of the Grid content exceeds the height or width of the Grid itself, the Grid renders a vertical or horizontal scrollbar respectively.
To enable horizontal scrolling, set the width of all columns.
Scrolling To A Specific Row and Column index
The scrollTo method allows you to scroll the Grid content to a specific row, column, or cell.
The following example demonstrates how to scroll to a specific Grid row and column index programmatically.
Endless 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 set the endless scrolling feature, use the scrollBottom event of the Grid.
The following example demonstrates how to implement endless scrolling with local data.
The following example demonstrates how to implement endless scrolling with remote data.
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.
To utilize this approach in IE11, nest the Grid inside a
divwrapper with thestyle="display: flex; flex-direction: column;"CSS and addoverflow: hiddento the component.
Non-Scrollable Mode
When the non-scrollable mode is enabled, the Grid renders its data as a single table and the scrollbar is not displayed. To define a non-scrollable Grid, set scrollable to none.
