JSON Object for jqGrid subgrid

Question

This is my 3rd question about JSON data for jqGrid's subgrid, till now I did not get a single comment. Please somebody help.

my 1st question
and the 2nd one

I am having trouble getting to know the json format to be used by a subgrid in jqGrid. In my 2nd question i asked about the format that I should be using for a particular scenario

for the given image enter image description here

Is this the proper JSON String?

var myJSONObject = {
"list": [
    {
        "elementName": "TERM",
        "attribute": [
            {
                "name": "information",
                "firstValue": "Required fixes for AIX",
                "secondValue": "Required fixes for AIX"
            },
            {
                "name": "name",
                "firstValue": "PHCO_34",
                "secondValue": "PHCO_34"
            },
            {
                "name": "version",
                "firstValue": "1.0",
                "secondValue": "2.0"
            }
        ],
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": false
    },
    {
        "elementName": "Asian-Core.ASX-JPN-MAN",
        "attribute": [
            {
                "name": "information",
                "firstValue": "Man",
                "secondValue": "Man"
            },
            {
                "name": "name",
                "firstValue": "Asian-Core.ASX-JPN-MAN",
                "secondValue": "Asian-Core.ASX-JPN-MAN"
            },
            {
                "name": "version",
                "firstValue": "B.11.23",
                "secondValue": "B.11.23"
            }
        ],
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true
    }
]
};

If yes, my 1st question this is where i reached so far

$('#compareContent').empty();
    $('<div id="compareParentDiv" width="100%">')
    .html('<table id="list2" cellspacing="0" cellpadding="0"></table>'+
            '<div id="gridpager2"></div></div>')
    .appendTo('#compareContent');

    var grid = jQuery("#list2");

    grid.jqGrid({
        datastr : myJSONObject,
        datatype: 'jsonstring',

        colNames:['Name','Result1', 'Result2'],
        colModel:[
            {name:'elementName',index:'elementName', width:90},
            {name:'isPrasentinXml1',index:'isPrasentinXml1', width:100},
            {name:'isPrasentinXml2',index:'isPrasentinXml2', width:100},
        ],
        pager : '#gridpager2',
        rowNum:10,
        scrollOffset:0,
        height: 'auto',

        autowidth:true,
        viewrecords: true,
        gridview: true,
        jsonReader: { repeatitems : false, root:"list" },
        subGrid: true,

        /*subGridModel: [{
            //subgrid columns names
            name: ['Name', 'Version', 'Information'],
            //subgrid columns widths
            width: [200, 100, 100],
            //subrig columns aligns
            align: ['left', 'left', 'left']

          }]*/

        // define the icons in subgrid
        subGridOptions: {
            "plusicon"  : "ui-icon-triangle-1-e",
            "minusicon" : "ui-icon-triangle-1-s",
            "openicon"  : "ui-icon-arrowreturn-1-e",
            //expand all rows on load
            "expandOnLoad" : true
        },
        subGridRowExpanded: function(subgrid_id, row_id) {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id+"_t";
            pager_id = "p_"+subgrid_table_id;
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
            jQuery("#"+subgrid_table_id).jqGrid({
                datastr : myJSONObject,
                datatype: 'jsonstring',
                colNames: ['Name','Value1','Value2'],
                colModel: [
                    {name:"name",index:"name",width:90},
                    {name:"firstValue",index:"firstValue",width:100},
                    {name:"secondValue",index:"secondValue",width:100},
                ],
                rowNum:20,
                pager: pager_id,
                sortname: 'name',
                sortorder: "asc",
                height: 'auto',
                autowidth:true,
                jsonReader: { repeatitems : false, root:"attribute" }
            });
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
        }
    });
    grid.jqGrid('navGrid','#gridpager2',{add:false,edit:false,del:false});

Any type of suggestions/comments/solutions are welcome. Thanks

My output

enter image description here

@3nigma: Good resource, Also I needed to know for this particular subgrid is my json string good enought, because the subgrid does not get populated — AabinGunz, Jul 11 '11 at 11:41
can you post a link to documentation i think the datatype should be `json` instead of `jsonstring` — Rafay, Jul 11 '11 at 12:09
@3nigma: Here is the doc.. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data — AabinGunz, Jul 11 '11 at 12:14
@Abhishek Simon: To send a message to me you should write a comment to a question/answer **where I wrote something**. If you just write "@Oleg" text in the comment to your new question I receive no notification about this. See [here](http://meta.stackexchange.com/questions/43019/how-do-comment-replies-work/43020#43020) for details. — Oleg, Jul 11 '11 at 12:48
@Oleg: Please can you take a look at [this question](http://stackoverflow.com/questions/6662475/treegrid-in-jqgrid) — AabinGunz, Jul 12 '11 at 10:18

Oleg · Accepted Answer · 2011-07-11T12:59:36.787

3

You code has small errors in the declaration of the myJSONObject variable and the code which create the contain of the div#compareContent should be fixed to

$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
  '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
        '<div id="gridpager2"></div></div>')
.appendTo('#compareContent');

Small other syntax errors are the trailing commas in the colModel: the comma before ']' should be removed.

Now to your main problem. You should change datastr : myJSONObject in the subgrid to something like

datastr : myJSONObject.list[0]

then the modified demo will show the data: see here.

One more problem which you has is the absent of ids in your data. You should modify the structure of the data to define the unique ids for very grid row and every subgrid row. You should take in the considerations that ids from the data will be used as id of <tr> elements and HTML don't permit to have id duplicates on one HTML page.

UPDATED: See here an example of modification of your JSON input and the jqGrid so that ids will be used.

edited Jul 11 '11 at 12:59

answered Jul 11 '11 at 12:46

Oleg

220,925
34
403
798

Thanks for replying, your answer made me leap 90%, there is still 1 problem, When I have multiple rows, I just get the 1st rows subdata, Please check my updated question for screenshot and json string for more than 1 row. – AabinGunz Jul 11 '11 at 13:04
@Oleg: +1 for jqgrid subgrid problem – Jul 11 '11 at 13:19
2

@Abhishek Simon: I modified [the second demo](http://www.ok-soft-gmbh.com/jqGrid/abhisheksimon1.htm) where 1) I included ids for your data 2) included `page: function() { return 1; }` in the `jsonReader` 3) set `expandOnLoad : false` which are the main problem. In my opinion the new setting is very buggy (see my [another answer](http://stackoverflow.com/questions/6459900/jqgrid-subgrid-doesnt-populate-with-data/6467539#6467539)) and I don't recommend you to use it. – Oleg Jul 11 '11 at 13:33
@Abhishek Simon: You are welcome! One more small remark. If you want use data paging, you should include in the data the number of current page and other paging information. If you will not use paging you should replace `rowNum:10` and `rowNum:20` in the subgrid with and large value like `rowNum:10000`. Currently if you would has more as 10 or 20 items of data only the first 10 or 20 will be shown and you will see no error or warning. – Oleg Jul 11 '11 at 13:47
@Oleg: I won't be using paging in my subgrid, but i require paging in the parent grid. Do I still need data in the number of current page and other paging information? – AabinGunz Jul 11 '11 at 13:55
@Abhishek Simon: You can see on the demo that the paging buttons are disable, so the user are not able to go to the next page. To have there enabled you should has the total number of pages grater as the current page number. So it you want to use the **server side** data paging you need include `page` and `total` inside of you JSON data. See [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data). – Oleg Jul 11 '11 at 14:01
@Oleg: I'll take that into consideration. Thanks again for your support. :) – AabinGunz Jul 11 '11 at 14:06
@Oleg: Is there any other way I can have pagination apart from getting it from the JSON, may be i'll override some method or assign it later? – AabinGunz Jul 12 '11 at 05:12
Sorry, but I don't understand your last question. What do you mean under "to have pagination apart from getting it from the JSON"? Which scenario of the pagination you plan? – Oleg Jul 12 '11 at 05:47
@Oleg: I need to have pagination but since you said i need to get pagination information from the server, is there any other way, like assigning pagination at the client side? – AabinGunz Jul 12 '11 at 05:56
@Oleg let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1343/discussion-between-abhishek-simon-and-oleg) – AabinGunz Jul 12 '11 at 05:57

score 1 · Answer 2 · edited May 23 '17 at 12:02

a couple of suggestion that may/maynot workout

when using subgrid select the grid as

var mygrid = jQuery("#mygrid")[0];

replace

var grid = jQuery("#list2");

with

var grid = jQuery("#list2")[0];

Ref: http://www.trirand.com/blog/?page_id=393/help/2-questions-about-jqgrid-subgrid-and-jsonstring

also change your json to a valid json

{
    "list": [
        {
            "elementName": "TERM",
            "attribute": [
                {
                    "name": "information",
                    "firstValue": "RequiredfixesforAIX",
                    "secondValue": "RequiredfixesforAIX"
                },
                {
                    "name": "name",
                    "firstValue": "PHCO_34",
                    "secondValue": "PHCO_34"
                },
                {
                    "name": "version",
                    "firstValue": "1.0",
                    "secondValue": "2.0"
                }
            ],
            "isEqual": false,
            "isPrasentinXml1": true,
            "isPrasentinXml2": false
        }
    ]
}

verfified by www.jsonlint.com

you may find the following link useful

jqGrid with JSON data renders table as empty

Thanks for replying +1. I checked my JSON string in your link, it's correct. Also `var mygrid = jQuery("#mygrid")[0];` what should i replace it with? — AabinGunz, Jul 11 '11 at 12:33
`var grid = jQuery("#list2");` is for the parent grid. if I replace this with `var grid = jQuery("#list2")[0];` the table will not be displayed. — AabinGunz, Jul 11 '11 at 12:45

JSON Object for jqGrid subgrid

2 Answers2

Linked