In JQgrid header colspan option is presently not available.
But we can do it using following code
HTML :
<table id=”list1″>
</table>
<div id=”pager1″>
</div>
Javascript :
$(document).ready(function()
{
jQuery(“#list1”).jqGrid({
url:’test.aspx’,
datatype: “json”,
height: ‘auto’,
colNames: [‘col1′,’ col2′,’ col3′,’ col4′,’ col5′,’ col6′,
colModel:[ . . . ],
. . .
caption : “Header Colspan”
});
var SuperHeader = ‘<tr id=”super_header” class=”ui-jqgrid-labels” role=”rowheader”>’;
SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr” style=”width: 145px;”></th>’;
SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr” style=”width: 143px;”></th>’;
SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr” colspan=”2″ style=”width: 192px;”>Col 3 & 4</th>’;
SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr” colspan=”2″ style=”width: 192px;”> Col 5 & 6</th>’;
$(‘#gbox_list1’).find(‘.ui-jqgrid-labels’).before(SuperHeader);
}