how to merge multiple columns into 1 column jqgrid

Question

I have 5 columns that display different Levels from Level0 to Level4. I hav a requirement to show all these level columns into 1 main columns named Levels, ie 1 column name level having 5 sub columns named lv0, lv1... lv4?

I tried solution provided in How to display multiple values in same column in jqgrid but it is merging the values and hence mismatch of values with the header.

Is there a way to merge columns into 1 columns and not just the values?

below is the colModel and ColNames for the jqgrid:

'detailViewcolNames': [
    "Sub Project(s)",
    "LV0",
    "LV1",
    "LV2",
    "LV3",
    "LV4",
    "Status",
    "%Comp",
    "%Weight",
    "Wins",
    "Attention",
    "Escalation",
    "Comments",
    "Next Steps"
],


'detailGridcolModel': [{
    name: 'name',
    width: '15%',
    index: 'name',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = "<span class='gridTitle'>" + cellvalue + "</span>";
        return cellHtml;
    },
    unformat: function(cellvalue, options, rowObject) {
        return cellvalue;
    },
}, {
    name: "Status",
    index: 'Status',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
    jsonmap: "from[Subtask].to.Status",
    formatter: function(cellvalue, options, rowObject) {
        return pathProjectModel.getStatusMapImage(cellvalue, options, rowObject);
    }
}, {
    name: 'LV0',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV1',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV2',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV3',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV4',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'attribute[Percent Complete]',
    index: 'attribute[Percent Complete]',
    width: '10%',
    title: false,
    resizable: false,
    sortable: false,
    jsonmap: "attribute[Percent Complete]",
}, {
    name: 'Weight',
    index: 'Weight',
    width: '10%',
    title: false,
    resizable: false,
    hidden: true,
    sortable: false,
    jsonmap: "Weight",
}, {
    name: "Win",
    index: "Win",
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    jsonmap: "Win",
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    }
}, {
    name: "Attention",
    index: "Attention",
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Attention"
}, {
    name: 'Escalation',
    index: 'Escalation',
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Escalation"
}, {
    name: 'Comments',
    index: 'Comments',
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Comments"
}, {
    name: 'Next Steps',
    index: 'Next Steps',
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Next Steps"
}, ]

below is the Sample data. Here id property contains rowid

    responseObj = {
    id: "2432.XXXXXXXXXXXXXX",
    "name": "project Name",
    "Status": "On Track",
    "LV0": "100",
    "LV1": "90.0",
    "LV2": "0.0",
    "LV3": "12.0",
    "LV4": "",
    "attribute[Percent Complete]": "0.0",
    "Weight": "30.0",
    "Win": [
        ["fasdfgasdf"]
    ],
    "Attention": [
        ["sdfasdga"]
    ],
    "Escalation": [
        ["fedgsdshsdfh"]
    ],
    "Comments": [
        ["dgdfhdfhdfuiopjnjkn"]
    ],
    "Next Steps": [
        ["vbmcbvndfgec"]
    ]
}

Answer 1

If you really need to use old jqGrid 4.6.0 and to use datatype: "local" then you should change the format of input data. It's the way, which I would recommend you. Alternatively you could try to use datatype: "jsonstring" and provide the input data via datastr parameter instead of data . You will have to change jsonmap defined as function to read the input data. In any way you have to fix the values of name properties, which you use.

The name property of jqGrid will be used to generate id attributes of some internal elements. HTML5 don't allow to use spaces in id (see here the statement: "The value must not contain any space characters"). Additionally the name will be used in different CSS selectors and you can have problems in case of usage names, which contains [ or ] (see [Percent Complete] ).

You should not use formatter to build the value of "virtual" property from other existing properties. Instead of that you should use jsonmap or "pre-process" the input data to set new property. If you do use custom formatter , then it's strictly recommended to specify unformat callback too.

The practical example is following. Let us you have input data with numeric the properties price and tax any you want to display the corresponding columns and total_price additionally, which build as the sum of price and tax . The recommended way: you should fill total_price once or to use jsonmap defined as function to calculate the sum of price and tax . After that you can use predefined formatter: "currency" to display the value. I think that you should generate one additional column from lv0, lv1... lv4 in exact the same way.

Additionally, I want to remark that the usage of old jqGrid 4.6 now is dangerous, because it's not supported since 2014. To be exact, there are not exist "jqGrid" product at all. There are exist two main forks of the old jqGrid: "free jqGrid" , which I develop, and which current version is 4.14.0 and commercial "Guriddo jqGrid JS" , which current version is 5.2.1. I strictly recommend you to migrate to one from the currently developed and supported products. I remind you about the problem described in the answer . The version of jqGrid, existing at the time, displayed wrong grid in the new version of Chrome. Google publish new version every 1.5-2 months. It could be that jqGrid 4.6 (and your existing web application) will display wrong grids in the next version of Chrome/Firefox or any other web browser. The only solution of the problem will be migration to another version of jqGrid, with the fixed code. If you continue to use jqGrid 4.6 then you will have to implement the fix yourself. If you would use the current version of "free jqGrid" or "Guriddo jqGrid JS" then the fix will implement developers of the corresponding product and you will need just to download the new version from GitHub.