jqGrid apply colspan to column header

Does jqGrid supports colspan on column header? I find this grid 开发者_StackOverflowcontrol useful because it has a lot of features and importantly plenty of documentation.

And how about the stylesheet? how to change the look and feel of the grid?

Thanks so much

You can change the look-and-feel by downloading themes from http://jqueryui.com/themeroller/ - the site even allows you to customize them. Then just drop the theme into your page(s).

What do you mean by colspan? If you mean having a header span multiple columns then no, I do not believe it supports that.

Regarding colspan,

its still not supported in jqGrid officially, here is the workaround,

jQgrid: multiple column row headers

Working example posted by @Oleg

Header grouping is supported since version 4.2.0. See here

I was also searching for that and I didn't find any answer.

I've managed to get 2 rows of headers like so:

----------------------------------------------------------
|  Col Group 1 (3 Columns)     | Col Group 2 (2 Columns) |
----------------------------------------------------------
|  Col 1  |  Col 2  |   Col 3  |    Col 4    |   Col 5   |
----------------------------------------------------------

Using a gridComplete event to add a row .before the row defined on the

gridComplete: function (){
    if (!$('#super_header').length) {
        $('#jqgridContainer tr.ui-jqgrid-labels').before('<tr id="super_header" class="bigHeader ui-jqgrid-labels"><th class="ui-state-default ui-th-column ui-th-ltr" colspan="3">Col Group 1</th><th class="ui-state-default ui-th-column ui-th-ltr" colspan="2">Col Group 2</th></tr>');
    }
},

I hope this helps.

Edited: After testing it more, I've realized it doesn't work very well and it can mess the width of the second row of headers ( Col 1 to Col 5 )

You can use

    jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: false, 
  groupHeaders:[
    {startColumnName: 'col2', numberOfColumns: 3, titleText: 'Col Group 1 (3 Columns) '},
    {startColumnName: 'col4', numberOfColumns: 2, titleText: ' Col Group 2 (2 Columns) '}
  ]
});

to set column parameters.

To remove the colum headers you can use,

jQuery("#grid").jqGrid('destroyGroupHeader'); Or
jQuery("#grid").jqGrid('destroyGroupHeader', false);