How To Divide One Cell Into 2 In Jqgrid?

Is possible to get these kind of design through jqgrid ------------------------------- ---------- | S.N0 | order ID | Date | Amount | --------- -----

Solution 1:

For the column you can define a custom formatter that you will be able to apply any style you like to it. In that formatter you have access to the values of alll of the objects in the row. So for your Order/Location formatter you can combine the two like this:

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

You will probally want to add classes to those div's so that you can style it better to meet your needs. As far as your column definition you will need to declare the customFormatter on one of the columns (note: the one it is declared on will be the variable cellvalue in the function above), the other column will need to be hidden then as it is needed as part of the rowObject. Ex.

{
    name: 'OrderID',
    index: 'OrderID',
    width: 90,
    formatter:orderFmatter},
{
    name: 'Location',
    index: 'Location',
    hidden: true},

Here is my sample in its entirety:

$("#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",
});

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>";
}

A fiddle is also available here.

That just leaves your header, which is a bit more difficult and could get ugly. I suggest not doing the split level on the header and doing something like Order Id/Location. Which could be set by doing this:

jQuery("#grid").jqGrid('setLabel', 'OrderID', 'Order Id/Location');

Like in this fiddle.

If you absolutely have to set the header like in your example, I can see what I can figure out, but this should get you started.