New to Kendo UI for AngularStart a free 30-day trial

Scroll Modes Basics

The Grid provides options for rendering its content in a scrollable or non-scrollable mode. To configure the desired scroll mode, use the 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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

The following example demonstrates how to implement endless scrolling with remote data.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Programmatically Scrolling the Grid

The Grid lets you programmatically control its scroll position and manually scroll to:

Consider the following specifics when programmatically scrolling the Grid:

  • When the Grid has virtualization enabled and the provided index or item is not visible in the current view, the scrollTo() and scrollToItem() methods will scroll the component to the position of the specified index or item. This operation will trigger the pageChange or dataStateChange event.
  • When the Grid uses paging and the provided index or item is not available on the current page, the component will not be scrolled and the scroll position will not change.
  • When the grouping or Master-Detail feature is enabled, the scrollTo() and scrollToItem() methods will scroll to the provided index or item regardless of the type of the row. The specifics about paging and virtual scrolling still apply.

Scrolling To a Specific Row and Column

The Grid allows you to scroll to a specific row or column by using the built-in scrollTo() method. The method accepts as an argument an object of type ScrollRequest that allows you to specify the zero-based row and column index of the record to which the component must scroll.

Starting with v15.3.0, the Grid provides a coherent behavior of the built-in scrollTo() method regardless of the exact component configuration.

The following example demonstrates the behavior of the built-in scrollTo() method inside a Grid with paging enabled.

Change Theme
Theme
Loading ...

Scrolling to a Specific Item

You can programmatically scroll the Grid component to a specific item by using the built-in scrollToItem() method. The method accepts as argument an object of type ScrollToItemRequest which has two properties:

  • idField—Represents the unique data identifier from the Grid data items.
  • id—Sets the value of the idField data identifier.

The following example demonstrates the scrollToItem() method in action.

Change Theme
Theme
Loading ...

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.