How to let a GXT grid take up all available width?

Question

I have a grid in GXT, something like this:

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
ColumnConfig config = new ColumnConfig();
config.setId("type");
config.setHeader("Type");
config.setWidth(50);
configs.add(config);
config = new ColumnConfig();
config.setId("text");
config.setHeader("Info");
config.setWidth(75);
configs.add(config);

columnModel = new ColumnModel(configs);
listStore = new ListStore<DtoModel>();

grid = new Grid<DtoModel>(listStore, columnModel);
grid.setAutoHeight(true);
grid.setAutoWidth(true);

VerticalPanel verticalPanel = new VerticalPanel();
verticalPanel.setLayout(new FillLayout());
verticalPanel.add(grid);

This creates the grid just fine with one exception-- the width is limited to the sum of the column widths. When I forgo the column widths, the grid ends up having 0 width.

Is there a way to have this grid and its columns expand to fill the entire area available to it?

Edit: One of the difficulties is the ColumnConfig.setWidth() method only takes an int as a parameter, so I can't specify "100%" as a string or something like that.

Marvismarwin

Answer 1

This is the way to do it:

grid.getView().setAutoFill(true);

Here is a key point to remember: With setAutoFill() when you resize a column, gxt will always resize all other columns so that the grid continues to fit the container. Without autoFill, if you just use the autoExpand column, if you resize one column, the grid could grow bigger (or smaller) than the containing component and in such a case you have to manually resize the grid to fit - which is not only a pain, it is almost impossible for the end user in most cases.

Pitiful

This was the solution I was finally looking for. Thanks so much! – Marvismarwin

Answer 2

There is a function in GridView that forces all columns to fit to the availiable space. It is like setting a flex of 1 to every column.

grid.getView().setForceFit(true);

Conway

Answer 3

The GXT Grid has a method named setAutoExpandColumn() that will take id of the column that you want to take up all available space in your grid. I would remove the setAutoHeight and setAutoWidth from the grid.

I am not sure if you are trying to achieve a fixed width layout or flexible layout that will expand based on the height/width of the browser. Here's what I typically do as I want my grids to take up all of the height and width and scroll on the page. Hope this helps.

--Vinny

    Viewport viewport = new Viewport();
    viewport.setLayout(new BorderLayout());

    ContentPanel center = new ContentPanel();
    center.setFrame(false);
    center.setLayout(new FitLayout());
    center.add(grid);

Aylmer

This will also ensure that your columns "fill" the grid (or shrink if needed) when resizing the window, or when minimizing the grid area, for instance when it is part of a viewport. Thank you :-) +1 – Cellulitis

Answer 4

you can try to style the grid/columns with css (setStyle/setColumnStyleName) and then you can use 100% as width.

cupakob

Gaiety

I tried your suggestion, but it makes no difference. It still shows up as nothing unless the integer width/height values are provided, even if I specify setStyle("width: 100%"), and if I specify both, it still only shows up as the integer widths specified. – Marvismarwin

setStyle("width: 100%") will not work, here you must specify a style name from the stylesheet...for example: setStyle("myGridWidth") and "myGridWidth" is defined in your *.css as follow: .myGridWidth { width: 100% } – Gaiety

Answer 5

May be it's too late for now, but I tried to set grid's autoHeight and autoWidth properties to false, combining it with setting autoExpandColumn (I didn't need to change default autoFill's value).

grid.setAutoHeight(false);
grid.setAutoWidth(false);

Heidyheifer