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