Grid colSpan does not work in row 0

[John Locke]

Hi,

Have not verified all the places this occurs, but I did see a forum post indicating someone else experiencing the same problem: http://dojotoolkit.org/forum/dojox-dojox/dojox-grid-support/colspan-first-row-won-t-work

In my situation, I'm using a dojox.grid.model.DojoData? model, and when I set a colSpan greater than one on the first row, that entire column and the columns it spans in other rows do not appear. They are visible in the markup, but have 0 width. This is still the case in 1.1.0, and trunk, and visible in FF 2.0.x.

colSpan in other rows after the first works fine, and rowSpan works as expected in the first row.

[bill]

mark all (open) tickets w/blank milestones to be "tbd"; their milestones need to be set to a version number or to "future"

[Bryan Forbes]

This is a side effect of the grid using 'table-layout: fixed;' in its CSS. This makes the table layout faster, but has some limitations: notably that the first row defines how the rest of the table will be laid out. This means that you cannot define a colspan on cells in the first row of cells because the browser doesn't know about subsequent rows of cells. There are two possible solutions:

1. You can override the dojoxGridRowTable in your CSS to set a width for your table and use 'auto' table layout:

dojoxGridRowTable {
    width: 33em;
    table-layout: auto;
}

The problem with this is cell widths will not be calculated correctly.

2. You can mirror your second row of cells with a row of blank cells above the first row and then hide that new row:

{
    cells: [
        [{width: 10}, {width: 10}, {width: 10}, {width: 10}, {width: ''}],
        [{name: 'Day', value: 'Day', colSpan: 5}, {name: 'Meal', value: 'Meal', colSpan: 3}],
        [{name: 'Morning', value: 'Morning', width: 10 }, {name: 'Afternoon', value: 'Afternoon', width: 10 }, {name: 'Breakfast', value: 'Breakfast', width: 10 }, {name: 'Lunch', value: 'Lunch', width: 10 }, {name: 'Dinner', value: 'Dinner', width: 10 }]
    ],
    onBeforeRow: function(inDataIndex, inSubRows){
        inSubRows[0].invisible = true;
    }
}

Because 'table-layout: fixed' is vital to how the grid calculates cell widths and the speed with which the grid renders, I'm marking this as 'wontfix'.