:: Forum >>

complex layout (colspan/rowsapn)

I found only one reference to the colspan in the forum:
And it's talking about header colspan.
I was wondering if there is a way to build complex layouts with grid v2.
For example I would like my table to look like this:

| Cell1 | |
|---------- Cell3 |
| Cell2 | |
| Cell4 | Cell5 |

Any input is appreciated.
Thursday, November 17, 2005
I guess text version did not work as I expected. :-)
Here is an html example:

<table border="1" cellpadding="0" cellspacing="0">
<td rowspan="2">Cell3</td>
<tr><td>Cell4</td><td>Cell 5</td></tr>
Thursday, November 17, 2005
Remember that the AW control is a GRID not a TABLE. You can only mimic the look of what you want by manipulating the borders of cells but you will not be able to center text vertically between two rows like you can in a table. Nor will you be able to have text cross over column boundries. If you really need to do what you are proposing you are going to need to use an HTML TABLE.

Think of it a little harder, how would you represent the data in an Array so that the grid would know how to diplay it like you want? The answer is that you can't.
Jim Hunter
Friday, November 18, 2005
Jim thanks for the quick response. I understand your point of view, but Array is not the only structure the data could reside in.
I overwrote the cell model to deal with the JS objects. We use JSON-RPC to send the data back and forth between the client and server.

I guess my next question is for Alex: Are there any plans to support some type of row/column span mechanism?
Friday, November 18, 2005
I think if you want this kind of functionality you must use a table most of the things with the grid can be made by tables too (but some functions like hiding colums etc will be difficult).
Friday, November 18, 2005
I'm not certain of both RowSpan and ColSpan co-existing, as in your example, but I have a solution to the ColSpan issue.

(Be patient, as I am in the process of moving DNS servers - this link may not be available for the next 24 hrs)


Check the page source for details
Brad Anderson
Friday, November 18, 2005
Sorry about the delay - the link above now works...
Brad Anderson
Tuesday, November 29, 2005
that is a nice example! Can you do the colspan or rowspan withing the data portion of the grid? Even if you can't this example does show how headers can be changed to group data, I like it!
Jim Hunter
Wednesday, November 30, 2005
Hmm, I guess you could do it.

The following function is for headers, but could be adapted for the data portion of the grid:
// handles width for column header cells, based on span
obj.getHeaderTemplate().setStyle("width", function(col, row) {
    var span = this.getHeaderProperty("span");
    if (!span) return 0;
    var i, w = 0;
    for (i=0; i<span; i++) {
        w += this.$owner.getColumnWidth( i + col );
    return w;

Note that the 'span' property needs to be set for this function to work - I do that with a different array (header.spans) that needs to be constructed. There is probably a way to set the 'span' property by iterating thru the other values, and detecting a blank 'CellText' property, and then just supplying blanks to accomplish this.
Brad Anderson
Monday, December 5, 2005
This is encouraging, as I also need fixed headers to span more than one column. The only problem is that Brad's example doesn't look quite right on Firefox 1.5. The spannng headers seem a little bit wider than their sub headers. In other words, the width of "week 1" is slightly wider than the sum width of "sales" and "qty".

Also, do you believe that this solution is compatible with making the cell width optimal, as described below?


Many thanks in advance.
Duane Gran
Thursday, December 15, 2005

Thanks for the Firefox 1.5 update - I hadn't checked the example after I upgraded. I don't know the issue, but maybe it's related to the other CSS issues that Firefox is having with AW stuff... I'll take a look.

I think the solution is compatible with varying cell widths, b/c the function in the post just above yours (getHeaderTemplate()) iterates thru the columns, getting their width, and adding it onto the var 'w'. Then the left-most cell gets the total width, and all the others in the span get zero.
Brad Anderson
Friday, December 16, 2005

Thanks for looking into this. In the meantime I would like to experiment with the colspan example you put together, but maybe I'm overlooking something. I tried to save the page with Firefox where it pulls downs the related css and js, but the example shows up as blank page. Is there some special trick to downloading and running the example?
Duane Gran
Monday, December 19, 2005
Maybe the path of the AW lib - I add a /js/ to it. You should only need the source html of the page and the AW files.

If you'd like to converse via email (as this forum has no notification), feel free. brad at dsource dot org
Brad Anderson
Monday, December 19, 2005
Hi ,

I have implemented the above code. It works great. But there are some problems. I hope you can help me solving the problem;
1) How to change the width of the columns. Since the column has variable width.
2) At the time of resizing the width of the column, only the header resizes.
3) If I manually add the width of the particular column say;
.aw-column-1 {
WIDTH: 430px;
the width of the column with data increases and not the header width.
4) How to make sort possible for the second row of the header.

Please help me in solving the above problem.

Sanjay Sharma
Tuesday, May 16, 2006

Hey Sunjay .. if u managed to make the sorting work, let me know ..
well it is possible to sort .. but the second row header sorts itself as well, FUNNY! ..

Sunday, May 21, 2006
Hi all,
me too, I'm using Brad's wonderful colspan/rowspan method, and it works great.
I've just purchased the standard edition about a month ago and wanted to check whether there are news about this implementation, if it's been included in a new release, and so on.
For the moment I'm experiencing the same problems:

1 - Controlling cells' width;
2 - Enabling sort on the second header row (sorting on the first works gracefully).

If anybody has answers... PLEASE POST!!!

Monday, May 29, 2006

Was able to solve the Firefox 1.5 bug with the column headers that span stretching a bit too much. Alex advised I try this:

.aw-gpanel-top .aw-border-false {
    display: none;

Voila! It works... As before, see: http://www.penguinblotter.com/colspan.html

Now onto column resizing and sorting. Not sure if I should use the bottom-most col header for one or both of those...
Brad Anderson
Thursday, June 15, 2006
Someone have solved this problem posted by Sanjay
" If I manually add the width of the particular column say;
.aw-column-1 {
WIDTH: 430px;
If so which is the solution ?

Thanks in advance
Thursday, July 20, 2006
Did anyone ever get this to work when you have pre-defined column widths?
Friday, August 11, 2006
did anyone get a solution for changing the column width and the second header columnwidth?

I am trying this wonderfull grid but thats what keeps me busy.

Mark Wester - Holland
mark wester
Tuesday, October 10, 2006
Here is another implementation of multi-column headers (see the code at the end of the thread) -


Alex (ActiveWidgets)
Tuesday, October 10, 2006

I am new to AW coding and this forum is very helpful.

Started to work on grid control and when using gridObject.setStyle("width","100%") for a grid data over 100 rows and 140 column data.

Problem: When trying to scroll horizontally or vertically, grid is getting refreshed and putting the control back to the first row. This way am not able to scroll down or across last cell.

Any thoughts or clues?

Friday, October 20, 2006

This topic is archived.

Back to support forum

Forum search