complex layout (colspan/rowsapn)

I found only one reference to the colspan in the forum:
/javascript.forum.3958.4/colspan-2-in-column-headers.html
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.

I guess text version did not work as I expected. :-)
Here is an html example:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cell1</td>
<td rowspan="2">Cell3</td>
</tr>
<tr><td>Cell2</td></tr>
<tr><td>Cell4</td><td>Cell 5</td></tr>
</table>

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 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?

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).

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)

http://www.penguinblotter.com/colspan.html

Check the page source for details

Sorry about the delay - the link above now works...

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!

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.

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?

http://www.activewidgets.com/javascript.forum.743.11/autosize-column-widths.html

Many thanks in advance.

Duane,

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,

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?

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

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.
Thanks

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! ..

>_<

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!!!

Diabolik

Okay,

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...

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
Basil

Did anyone ever get this to work when you have pre-defined column widths?
Thanks,
Thom

Hi,
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

Here is another implementation of multi-column headers (see the code at the end of the thread) -

http://www.activewidgets.com/javascript.forum.16298.7/sorting-on-second-header-row.html

Hi,

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?

-Sunny