JavaScript/jQuery TreeList - scrolling

Scrolling allows a user to browse data left outside the current viewport. The widget provides several scrolling modes detailed in the mode option description.

See Also

• Scrolling

The following rendering modes are available in the widget:

• "standard"
  Renders all columns at once.

• "virtual"
  Renders only those columns that get into the viewport.

Use the GridColumnRenderingMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Standard and Virtual.

The following scrolling modes are available in the widget:

• Standard
  Rows are rendered at once or by pages if paging is enabled. Scrolling appears only if all the rows cannot fit into the widget's height.

• Virtual
  This mode is an alternative to paging where pages are rendered when they get into the viewport and removed once they leave it. Use this mode if a user should be able to scroll data by pages.

Regardless of the scrolling mode, you can use the paging.pageSize option to specify the number of rows on a page.

Use the TreeListScrollingMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Standard and Virtual.

In virtual and infinite scrolling modes, pages are loaded on demand. If you set this option to true, the adjacent pages are loaded in advance for smoother scrolling. This option can reduce the performance on older devices.

Unlike the mode option, which defines when to load data for rows, this option defines when to render them. The following rendering modes are available:

• "standard"
  Renders all the loaded rows at once.

• "virtual"
  Renders only those rows that get into the viewport. Use this mode if the pageSize is large. Rows that are being currently rendered can be shown as grey boxes.

Use the GridRowRenderingMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Standard and Virtual.

View Demo

The scrollbars help to scroll the content vertically and horizontally. Vertical scrolling is available when all the rows do not fit in the widget's height. Horizontal scrolling is available when all the columns do not fit in the widget's width, which can happen when columns have fixed widths or the columnAutoWidth option is set to true.

Use the ShowScrollbarMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: OnScroll, OnHover, Always, and Never.

By default, the widget employs native scrolling on most platforms, except non-Mac desktops and devices based on Android older than version 4. To employ native scrolling on all platforms without exception, assign true to this option. If you assign false, the widget simulates scrolling on all platforms.