0

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, i.e. 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"]
    ]
}
Community
  • 1
  • 1
DivyaJain
  • 3
  • 3
  • There are exist many ways to implement your requirements. It's important to know additional information: 1) which `datatype` you use? (`"local"`, `"json"`, `"xml"`), ... 2) do you use `loadonce: true`? (if you use not `"local"` datatype) 3) which format has the input data of jqGrid? (an example of 2-3 rows with 3-4 properties would be enough) 4) which **version** of jqGrid you use (can use) and from which **fork** of jqGrid? ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7). – Oleg May 18 '17 at 07:00
  • please find answer to your questions: 1) datatype : "local" 2) i'm not using loadonce: true 4.) version 4.6.0 – DivyaJain May 18 '17 at 07:27
  • 1) datatype : "local" 2) i'm not using loadonce: true 3.) input data is in JSON format 4.) version 4.6.0 below is sample input data : { Attention: Array(1) Comments: Array(1) Escalation: Array(1) LV0: "100.0" LV1: "100.0" LV2: "38.3" LV3: "0.0" LV4: "0.0" Next Steps: Array(1) Status: "On Track" Weight: "30.0" Win: Array(1) attribute[Percent Complete]: "39.2" id: "2432_XXXXXXXXXXXXX" name: "prjectName" } – DivyaJain May 18 '17 at 07:38
  • Which format of input data you use? The format of data is really important. You should click on "edit" link and to append your question with all additional information. *Think about other readers of your question*. Is the usage of retro version 4.6.0 *really required*? It's more as 3 years old and is not supported since a long time. I recommend you to ungrade to free jqGrid 4.14.0. It's the fork of jqGrid, which I develop, and which you can use for free in absolutely the same way like jqGrid 4.6.0. – Oleg May 18 '17 at 07:39
  • Could you post the example of the data in *JavaScript format*? Where is `lv0, lv1... lv4`? Which property contains id (rowid)? Where is `colModel` of the most important columns? – Oleg May 18 '17 at 07:40
  • I have added details in the question. And yes, I have to use version 4.6.0 only, as to change version here , is a long process and required a lots of approval. so can't change the version. Please let me know if any other details are also required. Sorry for bad skills of posting question. thanks for your help in advance. – DivyaJain May 18 '17 at 08:57
  • I have to do my main job now. I'll can read and analyse your question later. I see already some bugs in `name` values (it should contain no spaces and it's strictly recommended don't use special characters in names, like `[` - see name: 'attribute[Percent Complete]'). `jsonmap`, which you use is wrong too, but it will be ignored by version 4.6 if you use `datatype: "local"`. You posted test data still *not in JavaScript format*. It would be good if you prepare **the demo** (JSFiddle) with 2-3 rows of test data. The demo will contain all required information. – Oleg May 18 '17 at 09:10
  • You wrote "1 column name level having 5 sub columns named lv0, lv1... lv4". What column contains the information? – Oleg May 18 '17 at 09:12
  • I currently have 5 columns (LV0,... LV4), and no Level column yet. I need to create one and show all these 5 columns inside it. – DivyaJain May 18 '17 at 09:48
  • Please include in the text of the question the information about `datatype`. It's still unclear **how you fill the grid with the data**. Do you use `data` parameter of jqGrid? The code of `pathProjectModel.multiValuesFormatter` is unknown too. What should it do? The usage of `name` have to hold the rules for `id` and CSS selectors. The usage of `name` with space like `name: 'Next Steps'` is wrong. The usage of other symbols like in `name: 'attribute[Percent Complete]'` can follow other serious problems. You have to fix the `name` value. – Oleg May 18 '17 at 10:24
  • The possibilities of jqGrid 4.6 are in case of usage `datatype: "local"` are very restricted. No `jsonmap` will be used. If you have to read the input data with spaces in the property names that you will **have to change the input data** before filling the grid. I asked you about the meaning of `pathProjectModel.multiValuesFormatter` mostly to be sure that you correctly understand the goal of formatter. You should use it in case if you need to generate custom HTML fragment, which represent the data. – Oleg May 18 '17 at 10:29
  • On the other side `jsonmap` **read** the input data and *saves locally* in another format. Thus if you need *to construct* the content of one column from some properties of input data, then one should use `jsonmap` instead of formatter. For example, you can have `price` and `tax` properties in input data and you can generate the content of the column `total_price` the value as the sum of `price` and `tax`. You can still use `formatter: "currency"` in the column to *display* the data correctly. By sorting one should use the numeric value saved in the `total_price` by `jsonmap`. – Oleg May 18 '17 at 10:33
  • the old jqGrid 4.6 don't allow to use `jsonmap` with local data. Thus the only way, which I see is *pre-processing* of your original source data to another data, which contains readable for jqGrid data. You can, for example, set the property `"attribute_percent_complete"` based on the value of the property `"attribute[Percent Complete]"` of input data. In the same way you can create new property, which contains merged information about all lv0, lv1... lv4 properties. The retro version of jqGrid, which you use, has not other possibility to use "virtual" properties. – Oleg May 18 '17 at 10:36

1 Answers1

0

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798