How to merge cells in jqGrid 4.0

Question

I've been trying to "merge" cells in a jqGrid, that is, I want to make cells for specific rows have a colspan=2 (or more). So far I've been able to get the borders to work properly using the cellattr option in the column model with something like this:

colModel = { name: "a", width=50, 
             cellattr: function(rowId, tv, rawObject, cm, rdata) {
                          if (rowId < 5) { return 'sytle="border-right:0px"'; } },

             name: "b", width=50, 
             cellattr: function(rowId, tv, rawObject, cm, rdata) {
                          if (rowId < 5) { return 'sytle="border-left:0px"'; } } };

This just removes the border for the cells that I want to merge (a & b up to line 5). But if I add text to any of these boxes text-align will obviously not work properly and the text just gets cut off if it is larger than 50 pixels.

I could do some crazy thing where I do center-align by cutting all the text in half and add each half to column "a" and "b" under right-align and left-align respectively. However, there seems like there should be a better way.

Answer 1

I find your question very interesting, so +1 from me.

It seems to me that the usage of colspan=2 is what you really need. To have the same number of the columns in the rows having colspan=2 I suggest to hide the next <td> element in the row:

{
    name:'a',index:'a', width:50,
    cellattr: function(rowId, tv, rawObject, cm, rdata) {
        if (Number(rowId) < 5) { return ' colspan=2' }
    }
},
{
    name:'b',index:'b', width:50,
    cellattr: function(rowId, tv, rawObject, cm, rdata) {
        if (Number(rowId) < 5) { return ' style="display:none;"' }
    }
}

I tested the implementation only a few time, but it seems to work:

The demo you can see live here.

UPDATED: Another answer shows how can be used rowspan attribute in jqGrid.