Vertical Alignment in Listgrid Header

[thilo]

Hi,
I'd like to set the vertical alignment of the listgrid's header. Unfortunately, I cannot find an appropriate method. Do you have any hints for me?

Thanks & kind regards
Thilo

[JoseyWales]

thilo - did you find a solution for this?

[dzarras]

Likewise... I can see how to horizontally align the header text (setAlign) and how to horizontally align the text of the cells in the column (setCellAlign), but not how to set the vertical alignment of the header text.

This is an issue in the context of HeaderSpans. HeaderSpans apparently render their titles on top of the "leaf" header text which is always vertically centered within the specified ListGrid.headerHeight. If a ListGrid's headerHeight has been been set to something like 100 (to allow for lengthy header text values which wrap), and the field encounters a shorter header text value, it can be covered by the text of the HeaderSpan. My thought was to force the field's title to be vertically aligned to the bottom of the header cell.

Any thoughts from anyone?

I'm using the July 25th build of 3.1d Pro, on Firefox 11.

[Isomorphic]

We didn't quite follow your description, but you can use setAttribute("vAlign", "bottom") on the ListGridField object to affect just one header, or setHeaderButtonProperties() to affect them all.

[dzarras]

Thanks for the 4-minute(!) turnaround... I perhaps complicated the problem description with the HeaderSpans rendering issue, but that's what's driving this bus.

One suggestion worked, one didn't:

// This is within a loop, creating many columns based on a collection of column definitions...
ListGridField priceColumn = new ListGridField(colDef.getDataKey(),colDef.getTitle(),100);

priceColumn.setType(ListGridFieldType.FLOAT);
priceColumn.setDecimalPad(2);
priceColumn.setDecimalPrecision(2);
priceColumn.setAlign(Alignment.CENTER);
priceColumn.setCellAlign(Alignment.RIGHT);
priceColumn.setWrap(true);

// Tried both of these, neither worked:
// priceColumn.setAttribute("vAlign",VerticalAlignment.BOTTOM);
// priceColumn.setAttribute("vertical-align",VerticalAlignment.BOTTOM);

// This worked:
Button props = new Button();
props.setValign(VerticalAlignment.BOTTOM);
priceColumn.setHeaderButtonProperties(props);

Note that HeaderSpan's setValign(VerticalAlignment.BOTTOM) does exactly what we're looking for, but just for the HeaderSpan title.

One last question: 'setHeaderButtonProperties' is a method on the ListGridField and is not a static method -- what did you mean by "to affect them all"? It seems like this technique could be selectively applied to only a subset of the fields, as needed.

[Isomorphic]

You'd need to call setAttribute() exactly as we showed - with a String, not an Enum. But you're correct, ListGridField.setHeaderButtonProperties() also lets you do this and it's cleaner than the setAttribute() approach.

It's also possible to set header button properties for all headers at once via skinning, but this doesn't seem to be what you want.

[dzarras]

Some more experiments, FYI...

// this doesn't work (note capitalized 'A')
// priceColumn.setAttribute("vAlign", "bottom");

 // *** this works ***   (attribute name evaluation is apparently case sensitive?)
priceColumn.setAttribute("valign", "bottom");

// this also works... preferable to sending in an un-scoped String constant?
// priceColumn.setAttribute("valign", VerticalAlignment.BOTTOM.getValue());

// this doesn't work -- value is apparently evaluated in a case-sensitive fashion also? -- value is "BOTTOM"
// priceColumn.setAttribute("valign", VerticalAlignment.BOTTOM.toString());

[Isomorphic]

This is now marginalia given setHeaderButtonProperties, but yes, the attribute is actually "valign" with lowercase A, but we're not sure why you think the enum would be returning the lowercase value from toString().

[dzarras]

Undocumented case sensitivity in undocumented class behavior (I wonder what else setAttribute could do for me) is hardly "marginalia" when it causes a developer to needlessly burn up time.

but we're not sure why you think the enum would be returning the lowercase value from toString().

I didn't... it served to prove that the second argument to setAttribute in this circumstance is evaluated in a case-sensitive manner as well.

[Isomorphic]

Sorry we're confused now - nothing in the documentation says that setAttribute() would be case insensitive. We gave you the wrong case for "valign" here in the forums but it's documented correctly.

Is there something to correct?

[dzarras]

("Truce!" We both have bigger fish to fry... please see my next post).

I would have just been much happier with an obvious method call like HeaderSpan's setValign. The point is, there's no obvious indication in the doc that I can control the vertical alignment of a ListGridField's header with a call to 'setAttribute'.

[Isomorphic]

.. and there doesn't need to be, because there's a setHeaderButtonProperties() API, obviating the need to use setAttribute(). We just neglected to point you to this clearer API, but it's already covered in the docs.