Posts Tagged ‘Colspan in JQgrid Header’

h1

Colspan in JQgrid Header

November 26, 2011

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);

}

Advertisements