Multi line grid header

[ozlemsimsek]

How can I have a multi line grid header with GXT 3.0? I saw a solution in ext js forums, and I overwrote "x-column-header-inner .x-column-header-text" in my own css file.But it did not work.

.x-column-header-inner .x-column-header-text {
white-space: normal;
display: table-cell;
vertical-align: middle;
}
.x-column-header-inner {
line-height: normal;
padding-top: 1px !important;
padding-bottom: 1px !important;
display: table-cell;
vertical-align: middle;
}

Is there a way to do it?

[icfantv]

Take a look at the Aggregation Grid example here: http://sencha.com/examples-dev/#Exam...ggregationgrid.

Specifically, you'll need to add a header group to your column model object.

[TreeSkier]

Does anyone know if column groups can span other groups? For example, in the AggregationGrid example above, where there are two groups, "Stock Information" and "Stock Performance", is there a way to get a group above those two? And if so, is there a limit to the hierarchy depth that can be built?

[icfantv]

A quick glance at the API indicates that it does not appear to support this directly, however you may be able to accomplish something via a custom ColumnHeaderAppearance ColumnHeader object.

[TreeSkier]

Thanks for the quick reply. I had the same thought of the current API's limitations. Looking over the ColumnHeader.ColumnHeaderAppearance api, would a potential solution to this problem involve writing custom HTML? In that case, how would I maintain the same look and feel?

I suspect I could never get this to work right coding it from the public API. I can't see how I'd handle things like column width resizing. But from the lower-level internals, it might not be that hard (read, very useful GXT enhancement request )

Any thoughts?

[icfantv]

Yes, I believe it would involve writing custom HTML. Regarding L&F, as long as you work within the confines of BaseColumnHeaderAppearance, the skinning portion may "just work" but I can't say that with any degree of confidence as I don't have any clue as to what their skinning CSS looks like and whether it's DOM structure dependent in a non-generic way.

At this point, since you're not a premium support subscriber, an answer to your question may be hit or miss if you ask it in a new thread (which you probably should have done so it gets full attention - hijacking existing threads is considered taboo and a no-no) but Sencha is trying to be good about answering them, you might try joining #extgwt on Freenode and asking your question there. One of the Sencha GXT devs hangs out there a lot and he may be able to give you a quick answer in either way (yes or no).

[Colin Alworth]

Column groups can indeed span other groups - working from the source at http://www.sencha.com/examples/#Exam...ggregationgrid I added the following bolded code (other lines added for context):

      ColumnModel<Stock> cm = new ColumnModel<Stock>(configs);

      cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Stock", 1, 4));
      cm.addHeaderGroup(1, 0, new HeaderGroupConfig("Stock Information", 1, 2));
      cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2));

      AggregationRowConfig<Stock> averages = new AggregationRowConfig<Stock>();

This resulted in the following UI:
screenshot12.png

The details of the row/column to insert this header are important, as are the rowspan/colspan to be set on the HeaderGroupConfig itself.

[icfantv]

It was just indirectly pointed out to me the following:

ColumnConfig's method to apply a group header is addHeaderGroup, not setHeaderGroup and looking at the code, the underlying construct maintains a collection of HeaderGroupConfigs so you may want to start there.

[TreeSkier]

Thanks icfantv and Colin, and I'm psyched to see Colin's result, below. I'm in an eval of GXT right now, so I don't have access to the Premium forum. icfantv's comments on hijacking threads are duly-noted (and I agree). I wasn't trying to do that... I thought my question was related. But I'll err on starting a new thread in the future.