Column auto width

[Edgie]

http://extjs.com/forum/images/icons/icon5.gif Column auto width
Hi guys,

Please tell me - if it's possible to make Grids column width to expand automatically, depending on longest text string entered to it ?:-?
Expand is not an option, because I need all of the columns to have this feature - to be as wide as longest string in that column. Thank you.

http://gwt-ext.com/forum/download/file.php?id=636

[Noggy]

If you aren't talking about an EditorGrid, why not check the lenght of your string, and then
do a setWidth on your Column ?
If have to load a table with data, you could always write some code to check which is the longest string in each column, and then resize the columns accordingly.

Noggy

[Edgie]

I do have a lot of data and I can't check every String in it .
Maybe there is some other - automagic solution ?

[kolli]

you can setAutoExpandColumnto true to enable filling of the space remaining to a particular column.

but i am pretty sure that there is nothing that can increase the column size automatically based on the text width.

Anyways lets see what others say.

[gslender]

use GridCellRenderer and check the string length in the model - if its longer than the column, set the width as needed...

[The_Jackal]

use GridCellRenderer and check the string length in the model - if its longer than the column, set the width as needed...
1) You probably should use TextMetrics to get the font size, etc

2) TextMetrics requires an element to bind to. I've not found a prefect solution yet but I get the grid cell and bind to that:



Element bidElementCell = (Element) grid.getView().getCell(i, colIndex);
textMetrics.bind((Element)bidElementCell.getChildNodes().getItem(0));
3) To do the above you need the actual grid, which you don't get in a GridCellRenderer to you will need to find a place to add it in.

4) TextMetrics doesn't account for the padding in a cell.
I get the child of the current cell (see 2) an then I made a new TextMetrics bind function to get the padding as well (3px 3px 3px 5px in the default themes).

See below (mostly copied from the 2.0M1:



public void bind(El el) {
this.el.setStyleAttribute("fontSize", el.getStyleAttribute("fontSize"));
//this.el.setStyleAttribute("fontWeight", el.getStyleAttribute("fontWeight"));
this.el.setStyleAttribute("fontStyle", el.getStyleAttribute("fontStyle"));
this.el.setStyleAttribute("fontFamily", el.getStyleAttribute("fontFamily"));
this.el.setStyleAttribute("lineHeight", el.getStyleAttribute("lineHeight"));
this.el.setStyleAttribute("textTransform", el.getStyleAttribute("textTransform"));
this.el.setStyleAttribute("letterSpacing", el.getStyleAttribute("letterSpacing"));
this.el.setStyleAttribute("padding", el.getStyleAttribute("padding"));
}