Grid auto sizing question

[jay.l.fisher]

I have an HLayout which has a form on the left and a grid on the right. I have sized the form to be exactly 300px wide and I would like the grid to expand and contract as needed to fit the remaining space. The user can change the data source for the grid at runtime and I would like the grid to resize itself to accommodate the new column set, using as much space as is available and, if necessary flowing off the page to the right with a horizontal scroll bar. I've tried using grid.setAutoFitData(Autofit.HORIZONTAL) and grid.redraw() after setting the datasource and loading the grid with data, but the grid always remains at the same width it was originally, based on the initial datasource which has just a few columns. When I switch to a datasource with more columns they just get scrunched down into the same amount of space with lots of open whitespace unused. I've tried putting the grid into a separate layout and also without a layout and nothing seems to work. How should I construct the canvas so the grid will expand/contract as needed?

[Isomorphic]

If the grid is in an HLayout with the DynamicForm, and no width is set on the grid, and the HLayout has 100% width so as to fill it's container, the grid will fill the remaining space.

To get hscrolling to happen instead of scrunched columns, use setMinFieldWidth() to establish a floor size.

[jay.l.fisher]

I don't want the grid to fill the remaining space unless it needs to. If the data source only has two columns they end up being about 3 inches wide. I want the columns to be sized to fit the data in the column and only expand if needed.

[jay.l.fisher]

Any more suggestions? I can't seem to understand what grid.setAutoFitData(Autofit.HORIZONTAL) actually does. The grid appears no different with and without that setting. What I'm looking for is essentially the same thing that Excel does when you use Format>Column>AutoFit Selection.

[Isomorphic]

autoFit in this case means that if you drag resize the columns, the grid as a whole will expand instead of introducing scrolling.

We do agree that it would be a useful feature addition to have the grid expand to the actual data values.

[jay.l.fisher]

Any way to accomplish the same thing by writing some code in the meantime?

[Isomorphic]

Yes, create a grid offscreen with overflow and bodyOverflow set to "visible" and showHeader:false, find out the rendered fieldWidths from that grid and apply those as widths on a grid with normal settings.

[jay.l.fisher]

I can't seem to get this to work. I've used the code from the Pattern Reuse example in the SmartGWT Showcase. The difference is that I've put the grid on the right hand side of the layout instead of the left so that it can expand to the right as needed. I added the code you suggested to the setDataSource method which now looks like this.

public void setDatasource(DataSource datasource) {  
	this.datasource = datasource;  
	grid.setDataSource(datasource);  
	form.setDataSource(datasource);  
	saveButton.disable();  
	grid.fetchData();
	// Resize the grid to fit the new data source
	ListGrid g = new ListGrid(); // offscreen grid
	g.setOverflow(Overflow.VISIBLE);
	g.setBodyOverflow(Overflow.VISIBLE);
	g.setShowHeader(false);
	g.setDataSource(datasource);
	ListGridField[] gf = g.getFields();
	for (int i=0; i<gf.length; i++) {
		grid.getField(i).setWidth(gf[i].getWidth());
	}
	grid.markForRedraw();
}

I also used grid.setAutoFitData(Autofit.HORIZONTAL) and, unlike the samepl, did not specify a width for the grid. When I change to a different data source with more columns the grid stays the same width as when it was first displayed. The code I added seems to make no difference at all.

[jay.l.fisher]

I may have stumbled upon a solution, but it has a bad side effect. Using grid.setFixedFieldWidths(false); has exactly the desired effect on the column widths. They size themselves automagically to the contents of each column. The only problem is that the column headings do not size accordingly, so you end up with column headings that don't line up with the columns. Screen shot attached.

A note in the javadocs says "NOTE: the header does not automatically respond to expanded field widths". Is there a way to make the header respond appropriately?

[Isomorphic]

Hi Jay,

Yes, headerless autoFit is currently the state of this feature. This can be combined with offscreen drawing to do one-shot autofit of a grid by drawing a parallel grid offscreen, measuring rendered fieldWidths, and applying them to the fields of a newly created grid.

We do plan an enhancement to do something close to this automatically.

[jay.l.fisher]

This can be combined with offscreen drawing to do one-shot autofit of a grid by drawing a parallel grid offscreen, measuring rendered fieldWidths, and applying them to the fields of a newly created grid..

I tried to accomplish this with the code I showed earlier in this thread, but it isn't working for me. Can you post an example or spot where I have an error?

[Isomorphic]

In that code, grid "g" was never draw()n and did not have setFixedFieldWidths(false) called on it.

[jay.l.fisher]

Still not able to get this to work. Here's my latest code, added to the Pattern Reuse example.

public void setDatasource(DataSource datasource) {  
	this.datasource = datasource;  
	grid.setDataSource(datasource);  
	form.setDataSource(datasource);  
	saveButton.disable();  
	grid.fetchData();
	// Resize the grid to fit the new data source
	ListGrid g = new ListGrid(); // offscreen grid
	g.setOverflow(Overflow.VISIBLE);
	g.setBodyOverflow(Overflow.VISIBLE);
	g.setAutoFitData(Autofit.HORIZONTAL);
	g.setFixedFieldWidths(false);
	g.setShowHeader(true);
	g.setDataSource(datasource);
	g.fetchData();
	g.hide();
	g.draw();
	ListGridField[] gf = g.getFields();
	for (int i=0; i<gf.length; i++) {
		SC.logWarn("Width should change from " + 
				grid.getField(i).getWidth() + " to " +
				gf[i].getWidth());
		grid.getField(i).setWidth(gf[i].getWidth());
	}
	grid.redraw();
}

I seem to be getting null values for the first 4 columns and the 5th says it is already sized the same as the "offscreen" grid. What am I missing?

10:15:12.219:WARN:Log:Width should change from null to null
10:15:12.220:WARN:Log:Width should change from null to null
10:15:12.221:WARN:Log:Width should change from null to null
10:15:12.222:WARN:Log:Width should change from null to null
10:15:12.223:WARN:Log:Width should change from 21 to 21

I've even tried setting all columns to a fixed width just to see that the setWidth() method will work and that has no effect. It's as if grid.getField(i).setWidth() just does nothing.

[jay.l.fisher]

Anything else to try? Without being able to resize the grid columns the Reusable Pattern isn't very reusable.

[ebron]

Any update on automating the autofit of column headers on grid resize?