how to custom header jqgrid

Question

i want create jqGrid like this enter image description here
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
enter image description here

in this grid i want divid header like body grid

score 5 · Accepted Answer · answered Dec 17 '12 at 11:39

5

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

enter image description here

answered Dec 17 '12 at 11:39

Oleg

220,925
34
403
798

thanks for help me, but i have one question, when use this solution i can not sorting with column Via, and sort just by Shipped. i want when user click with Via list sort by Via and when user click with shipped grid sorted with shipped. thanks. – Pouya Dec 17 '12 at 11:58
@Pouya: The sorting icons will be placed in the same ``. So you have to add more code to make all working. Look at [the answer](http://stackoverflow.com/a/4898901/315935) and [this one](http://stackoverflow.com/a/7256972/315935). – Oleg Dec 17 '12 at 12:09

how to custom header jqgrid

1 Answers1