This is my 3rd question about JSON data for jqGrid's subgrid, till now I did not get a single ment. 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

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

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

    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/ments/solutions are wele. Thanks

My output

This is my 3rd question about JSON data for jqGrid's subgrid, till now I did not get a single ment. 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

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

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

    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/ments/solutions are wele. Thanks

My output

• javascript
• jquery
• datagrid
• jqgrid

• 3 you can verify json at jsonlint. – Rafay Commented Jul 11, 2011 at 11:32
• @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 Commented Jul 11, 2011 at 11:41
• @Oleg: Please take a look at my questions :) – AabinGunz Commented Jul 11, 2011 at 11:42
• can you post a link to documentation i think the datatype should be json instead of jsonstring – Rafay Commented Jul 11, 2011 at 12:09
• 2 @Abhishek Simon: To send a message to me you should write a ment to a question/answer where I wrote something. If you just write "@Oleg" text in the ment to your new question I receive no notification about this. See here for details. – Oleg Commented Jul 11, 2011 at 12:48

2 Answers 2

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

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

Small other syntax errors are the trailing mas in the colModel: the ma 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.

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./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.

you may find the following link useful

jqGrid with JSON data renders table as empty