JavaScript/jQuery DataGrid - scrolling
Scrolling allows a user to browse data left outside the current viewport. The UI component provides several scrolling modes detailed in the mode property description.
Virtual Scrolling Demo Infinite Scrolling Demo
See Also
columnRenderingMode
Specifies the rendering mode for columns. Applies when columns are left outside the viewport. Requires the columnWidth, columnAutoWidth, or width (for all columns) property specified.
The following rendering modes are available in the UI component:
"standard"
Renders all columns at once."virtual"
Renders only those columns that get into the viewport.
mode
If you change this property, the DataGrid reloads.
The following scrolling modes are available:
Standard
A user scrolls a single page only. Scrolling is available only if all rows of a page do not fit within the UI component's height. In this mode, the pager performs the main navigation and scrolling is auxiliary. If you disable the paging feature, the UI component loads all rows simultaneously. This action can reduce the UI component's performance. In this case, use another scrolling mode.Virtual
The component loads pages while they are visible within the viewport and removes them once they leave it. In this mode, users can move to any page instantly. If the component takes time to load and render rows, they display gray boxes. Rendering optimization can reduce render time and remove the gray boxes.Infinite
The component loads the next page once the scrollbar reaches the end of its scale. In this mode, users scroll data gradually from the first to the last page.
Set the grouping.allowCollapsing property to false when you use infinite scrolling in conjunction with grouping.
Specify the component's height if you use virtual or infinite scrolling.
Set editing.refreshMode to
repaintto support editing if you use infinite scrolling.Row selection in infinite and virtual scroll mode with Shift+Click does not work in the following cases:
- Deferred selection is enabled.
- Row grouping is enabled.
- The allowSelectAll property is set to false.
Note that the rowRenderingMode property value is "virtual" and cannot be changed if you set the mode property to "virtual" or "infinite".
Regardless of the scrolling mode, you can use the paging.pageSize property to specify the number of rows on a page.
Virtual Scrolling Demo Infinite Scrolling Demo
See Also
preloadEnabled
Specifies whether the UI component should load adjacent pages. Applies only if scrolling.mode is "virtual" or "infinite".
renderAsync
Specifies whether to render rows after a user stops scrolling or at the same time as the user scrolls the DataGrid.
This property can have one of the following values:
| scrolling.renderAsync | Description |
|---|---|
| true |
Rows are rendered after a user stops scrolling. In this mode, row content may take time to appear, but scrolling is smoother. |
| false |
Rows are rendered at the same time as the user scrolls the DataGrid. In this mode, row content is displayed quicker, but the component performance during scrolling may be lowered. |
| undefined | The mode is defined automatically based on the row content. |
rowRenderingMode
Unlike the mode property, which defines when to load data for rows, this property 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. Specify the component's height and height of its container if you use the virtual mode.
scrollByContent
Specifies whether a user can scroll the content with a swipe gesture. Applies only if useNative is false.
scrollByThumb
Specifies whether a user can scroll the content with the scrollbar. Applies only if useNative is false.
showScrollbar
Specifies when to show scrollbars. Applies only if useNative is false.
The scrollbars help to scroll the content vertically and horizontally. Vertical scrolling is available when all the rows do not fit in the UI component's height. Horizontal scrolling is available when all the columns do not fit in the UI component's width, which can happen when columns have fixed widths or the columnAutoWidth property is set to true.