I'd like to apply a colspan attribute to a td inside the JQgrid modal window. It renders the modal form with the following structure

<form ...>
  <table ...>
    <tbody>
       <tr ...>
         <td class="CaptionTD"></td>
         <td class="DataTD"></td>
         <td class="CaptionTD"></td>
         <td class="DataTD"></td>
       </tr>
    </tbody>
  </table>
</form>

I've looked at all the options available, but i'm unclear on how to apply a colspan attribute to any of the td's. I was reading into appending some style to the cell, eg using the "classes" option, but as far as i know (based on my research... if you can call it that) you can't set a table's colspan using CSS as it's not seen as a style, but rather a "structural change to the table"

• jquery
• jquery-ui
• jqgrid

Do you use rowpos and colpos properties of formoptions and like to hide the second label column? Could you provide a code example which shows in which situation the usage of colspan would be good?

In general you can set colspan attribute inside of beforeShowForm callback. One can use something like

// in the below example the column name is 'name'
$("#tr_name>td:eq(1)").attr("colspan", "2");
$("#tr_name>td:eq(1)>input").css("width", "95%");
$("#tr_name>td:eq(0)").hide();

or something like

beforeShowForm: function () {
    var $tr = $("#tr_name"), // 'name' is the column name
        $label = $tr.children("td.CaptionTD"),
        $data = $tr.children("td.DataTD");
    $data.attr("colspan", "2");
    $data.children("input").css("width", "95%");
    $label.hide();
}

Typically if you set colspan=2 on <td> then one hide some previous <td> element in the same row.

As the result one can get something like