how to custom header jqgrid

Question

i want create jqGrid like this
I could divid body jqGrid i write this code

var data = [[1, 45, "E123", "1/1/11", "Done", 100], [2, 46, "E124", "1/12/11", "Done", 100]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ["SNO", "OrderID", "Location", "Date", "Status", "Amount"],
    colModel: [{
        name: 'SNO',
        index: 'SNO',
        width: 60},
    {
        name: 'OrderID',
        index: 'OrderID',
        width: 90,
        formatter:orderFmatter},
    {
        name: 'Location',
        index: 'Location',
        hidden: true},
    {
        name: 'Date',
        index: 'Date',
        width: 80,
        formatter:dateStatusFmatter},
    {
        name: 'Status',
        index: 'Status',
        width: 80,
        hidden: true},
    {
        name: 'Amount',
        index: 'Amount',
        width: 80}
    ],
    caption: "Stack Overflow Example",
});

var names = ["SNO", "OrderID", "Location", "Date", "Status", "Amount"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

function orderFmatter( cellvalue, options, rowObject )
{
    return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Location + "</div>";
}

function dateStatusFmatter( cellvalue, options, rowObject )
{
    return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Status+ "</div>";
}

this code create this grid

in this grid i want divid header like body grid

Answer 1

jqGrid supports header grouping. If you need just place multiline text in the column header you can implement this in more simple way.

The values in colNames can be HTML fragments. So you should place the code which you need in the corresponding item of colNames and add additional CSS which force to use auto height of the column headers instead of fixed height used by jqGrid per default.

The demo place in the column header of the last column the HTML fragment

<div style="height: auto; padding: 4px 0;">
    <span>Shipped</span><hr /><span>via</span>
</div>

and uses additionally the CSS

.ui-jqgrid .ui-jqgrid-labels .ui-th-column>div {height: auto}

As the result one get the grid as on the picture below