Vaadin Grid: Show all rows

Question

How do I make the new Grid widget in Vaadin 7 show all the rows of data (rather than scrolling)?

Answer 1

Height Mode

First you have to switch the height mode. Rather than being height being CSS oriented, you want row-oriented height.

myGrid.setHeightMode( HeightMode.ROW );

Then you can set the number of rows to display. You can specify fractional rows, as the number-of-rows argument is a double.

this.setHeightByRows( myDouble );

Avoid Zero Rows

So, to show all rows pass a double with the number of rows in your containing backing the Grid. But check for zero, as the Grid does not tolerate no rows. If you have no data in your container, specify some arbitrary number of empty rows.

int size = this.getContainerDataSource().size();
double rows = ( size > 0 ) ? size : myDefaultRowCount;

Two-Row Bug

In my own project I've run into a nasty bug in Vaadin 7.4.2 where setting a row count of two ( range of 2.0d to 2.7d ) causes high CPU load and minutes-long delays as page partially loads but never seems to end. I cannot reproduce in an example app, yet cannot determine any other cause in my own app. As a workaround, my code simply uses 3.0d (or 2.8d) in place of any occurrence of 2.0d.

if ( rows == 2.0d ) {         rows = 2.8d;  // Workaround for weird bug.
}

Example Subclass

Here is a subclass of Grid that adds a listener for any change in the set of rows. The listener resets the height of the Grid to display all the rows of fresh data.

package com.example;

import com.vaadin.data.Container;
import com.vaadin.shared.ui.grid.HeightMode;

/**
 * Adds one feature to Grid: Automatically resize the height to show all
 * rows.
 *
 * @author Basil Bourque. 
 * Released under ISC License, http://opensource.org/licenses/ISC
 */
public class GridAllRowsTall extends Grid
{
    static double defaultRowsCount = 3.0d;

    // -----|  Constructors  |-------------------------
    public GridAllRowsTall ()
    {
        super();
        this.initialize();
    }

    public GridAllRowsTall ( Container.Indexed dataSource )
    {
        super( dataSource );
        this.initialize();
    }

    public GridAllRowsTall ( String caption )
    {
        super( caption );
        this.initialize();
    }

    public GridAllRowsTall ( String caption , Container.Indexed dataSource )
    {
        super( caption , dataSource );
        this.initialize();
    }

    // -----|  Init  |-------------------------
    @Override
    void initialize ()
    {
        // Add a listener so when the set of items changes, re-size the Grid to display all rows.
        if ( this.getContainerDataSource() instanceof Container.ItemSetChangeNotifier ) {
            Container.ItemSetChangeNotifier n = ( Container.ItemSetChangeNotifier ) this.getContainerDataSource();
            n.addItemSetChangeListener( ( Container.ItemSetChangeEvent event ) -> {
                this.showAllRows();
            } );
        }
    }

    // -----|  Features  |-------------------------
    public void showAllRows ()
    {
        this.setHeightMode( HeightMode.ROW );
        int size = this.getContainerDataSource().size();
        double rows = ( size > 0 ) ? size : GridAllRowsTall.defaultRowsCount; // Cannot set height to zero rows. So if no data, set height to some arbitrary number of (empty) rows.
        if ( rows == 2.0d ) {
            rows = 3.0d; // Workaround for weird bug where a value of "2 rows" ( 2.0d - 2.7d ) causes a huge slowdown and major CPU load, and page never finishes updating.
        }
        this.setHeightByRows( rows );
    }
}