← Back

NoScrollGrid Flow Addon

Extension for Grid to delegate vertical scrolling outside the Grid's scroll container

Author

Rating

Popularity

<100

NoScrollGrid Extension for Grid

NoScrollGrid itself will never show vertical scroll bar. Scrolling down to bottom of the target scroll container (or optionally mouse wheel down/touchmove event) will increase grid's height automatically by predefined number of rows.
Grid's data provider defines the maximum size Grid can grow. Higher the Grid is set initially or by scrolling, more rows are being fetched and cached in client.

Usage

Quick sample how to use NoScrollGrid. NoScrollGrid extends Grid, so it works like Grid for most parts.

NoScrollGrid<Item> grid = new NoScrollGrid<>();
grid.setShowMoreOnScrollToBottom(getElement());
grid.setHeightFull();

getElement() in this sample return a com.vaadin.flow.dom.Element which can be <body>. Or it can be any other element like <div> as long as it is vertically scrollable ("overflow: auto;" for example). Given element should be ancestor for NoScrollGrid element in DOM hierarchy.

To change number of items to show more, you can call setRowsShownMoreOnScrollToBottom(int) explicitly. NoScrollGrid calls this method in constructor already and sets it to same as Grid's page size.

NoScrollGrid<Item> grid = new NoScrollGrid<>(20);
grid.setShowMoreOnScrollToBottom(getElement());
grid.setHeightFull();

Grid's page size affects the number of rows browser requests from the data provider and NoScrollGrid uses it to define size of the buffer for requested rows. Real number of rows requested and cached to client is usually number of rows that fit in NoScrollGrid's height plus buffer size.

Override NoScrollGrid.showMoreOnInit to false (default is true) to hide scroll bar initially.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Improved support for row details

Released: 2021-04-01
Maturity: STABLE
License: Apache License 2.0

Compatibility

Framework: Vaadin 18+; Vaadin 14 in 2.0.4; Vaadin 14+ in 2.0.2; Vaadin 13+ in 1.0.3
Browser: Firefox; Safari; Google Chrome; Android Browser; Microsoft Edge

NoScrollGrid Flow Addon - Vaadin Add-on Directory

Extension for Grid to delegate vertical scrolling outside the Grid's scroll container

## NoScrollGrid Extension for Grid NoScrollGrid itself will never show vertical scroll bar. Scrolling down to bottom of the target scroll container (or optionally mouse wheel down/touchmove event) will increase grid's height automatically by predefined number of rows. Grid's data provider defines the maximum size Grid can grow. Higher the Grid is set initially or by scrolling, more rows are being fetched and cached in client. ### Usage Quick sample how to use NoScrollGrid. NoScrollGrid extends Grid, so it works like Grid for most parts. ```java NoScrollGrid grid = new NoScrollGrid<>(); grid.setShowMoreOnScrollToBottom(getElement()); grid.setHeightFull(); ``` getElement() in this sample return a `com.vaadin.flow.dom.Element` which can be ``. Or it can be any other element like `

` as long as it is vertically scrollable ("overflow: auto;" for example). Given element should be ancestor for NoScrollGrid element in DOM hierarchy. To change number of items to show more, you can call `setRowsShownMoreOnScrollToBottom(int)` explicitly. NoScrollGrid calls this method in constructor already and sets it to same as Grid's page size. ```java NoScrollGrid grid = new NoScrollGrid<>(20); grid.setShowMoreOnScrollToBottom(getElement()); grid.setHeightFull(); ``` Grid's page size affects the number of rows browser requests from the data provider and NoScrollGrid uses it to define size of the buffer for requested rows. Real number of rows requested and cached to client is usually number of rows that fit in NoScrollGrid's height plus buffer size. Override `NoScrollGrid.showMoreOnInit` to false (default is true) to hide scroll bar initially. ### Sponsored development Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)

View on GitHub

NoScrollGrid Flow Addon version 1.0.1

NoScrollGrid Flow Addon version 2.0.0
Vaadin 14 Platform support

NoScrollGrid Flow Addon version 1.0.2
Added loading indicator

NoScrollGrid Flow Addon version 2.0.1
Added loading indicator

NoScrollGrid Flow Addon version 1.0.3
### Version 1.0.3: - Added compensation in scroll detection due automatically disappearing address bar in Android

NoScrollGrid Flow Addon version 2.0.2
### Version 2.0.2: Added tolerance to scroll to bottom detection to compensate automatically disappearing address bar in Android

NoScrollGrid Flow Addon version 2.0.3
### Version 2.0.3 - Changed license to Apache2

NoScrollGrid Flow Addon version 2.0.4
Fixed scroll issues with row details

NoScrollGrid Flow Addon version 3.0.0
Added support for Vaadin 19.

NoScrollGrid Flow Addon version 3.0.1
Improved support for row details

Directory