jqgrid only displaying the group column name

Question

How can I merge the jqgrid header. I only want to show the group header name. So far I have done this, the problem is I only want to show the group column name.

jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: false, 
  groupHeaders:[
    {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
    {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});

Answer 1

If you want just display headers over multiple columns and the sorting of data in the merged column is not interesting for you like the resizing of columns, then you can solve the problem without the usage of setGroupHeaders.

The demo displays the following results

It uses cmTemplate: { resizable: false } option to set resizable: false for all columns, it uses sortable: false in some columns and it uses the following code after the grid is created:

var newWidth = $("#list_amount").width() + $("#list_tax").outerWidth(true) +
        $("#list_total").outerWidth(true);
$grid.jqGrid("setLabel", "amount", "<em>Price</em>", "", {
    style: "width: " + newWidth + "px;",
    colspan: "3"
});
$grid.jqGrid("setLabel", "tax", "", "", {style: "display: none"});
$grid.jqGrid("setLabel", "total", "", "", {style: "display: none"});
newWidth = $("#list_closed").width() + $("#list_ship_via").outerWidth(true);
$grid.jqGrid("setLabel", "closed", "Shiping", "", {
    style: "width: " + newWidth + "px;",
    colspan: "2"
});
$grid.jqGrid("setLabel", "ship_via", "", "", {style: "display: none"});

The above code can have minimal problems with the column to header alignment less as 1px, but the most problem can be solved in the way.