Tum
Tum

Reputation: 3652

How to create the Horizontal ScrollBar at the bottom of DataGrid as in GWT CellSampler example?

I like DataGrid since it has fixed header so wen user scrolldown they are still be able to see the column header.

However, if there are too many columns then the DataGrid will manage to fit all columns within the Fixed Width of the widget that contain it.

For example, if a 30 column DataGrid was put inside a center (with 100px) of a DockLayoutPanel then all 30 columns will be divided evenly within 100px, which is make it unreadable cos the with of each column is too small.

So, I would love to use DataGrid but the DataGrid should have a Horizontal ScrollBar at the bottom so if there are many column then the user can just scroll horizontally to the right to see the data.

If we do correctly, then it should be like the GWT CellSampler example http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellSampler

Clearly, the CellSampler used DataGid, but I didn't see any Horizontal ScrollBar code in there.

So how to make DataGrid to display as in the CellSampler example?

Upvotes: 0

Views: 1633

Answers (2)

Swaraj
Swaraj

Reputation: 589

I have done following for My Table Datagrid.

     FlowPanel tablePanel = new FlowPanel();
    tablePanel.add( table );
    tablePanel.getElement().setAttribute( "style",
        "overflow-x: auto;width: " + ( Window.getClientWidth() - 37 ) + "px;clear: both" );
    add( tablePanel );

Upvotes: 0

Andrei Volgin
Andrei Volgin

Reputation: 41089

You should set the minimum width for your DataGrid:

myDataGrid.setMinimumTableWidth(600, Unit.PX);

Upvotes: 2

Related Questions