How to populate list of list json in jqgrid? that

Question

How to populate list of list json in jqgrid? that is list for main grid under list is for subgrid,

Jqgrid code as below,

    jQuery("#sg1").jqGrid({
    url: 'server.php?q=1',
    datatype: "json",
    height: 190,
    colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 55
    }, {
        name: 'invdate',
        index: 'invdate',
        width: 90
    }, {
        name: 'name',
        index: 'name',
        width: 100
    }, {
        name: 'amount',
        index: 'amount',
        width: 80,
        align: "right"
    }, {
        name: 'tax',
        index: 'tax',
        width: 80,
        align: "right"
    }, {
        name: 'total',
        index: 'total',
        width: 80,
        align: "right"
    }, {
        name: 'note',
        index: 'note',
        width: 150,
        sortable: false
    }],
    rowNum: 8,
    rowList: [8, 10, 20, 30],
    pager: '#psg1',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    multiselect: false,
    subGrid: true,
    caption: "Custom Icons in Subgrid", // define the icons in subgrid 
    subGridOptions: {
        "plusicon": "ui-icon-triangle-1-e",
        "minusicon": "ui-icon-triangle-1-s",
        "openicon": "ui-icon-arrowreturn-1-e"
    },
    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({
            url: "subgrid.php?q=2&id=" + row_id,
            datatype: "json",
            colNames: ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
            colModel: [{
                name: "num",
                index: "num",
                width: 80,
                key: true
            }, {
                name: "item",
                index: "item",
                width: 130
            }, {
                name: "qty",
                index: "qty",
                width: 70,
                align: "right"
            }, {
                name: "unit",
                index: "unit",
                width: 70,
                align: "right"
            }, {
                name: "total",
                index: "total",
                width: 70,
                align: "right",
                sortable: false
            }],
            rowNum: 20,
            pager: pager_id,
            sortname: 'num',
            sortorder: "asc",
            height: '100%'
        });
        jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, {
            edit: false,
            add: false,
            del: false
        })
    }
});
jQuery("#sg1").jqGrid('navGrid', '#psg1', {
    add: false,
    edit: false,
    del: false
});

Sample list of list json as below

[{
    "id": "01",
    "name": "AA",
    "age": "29",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}, {
    "id": "02",
    "name": "BB",
    "age": "30",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}, {
    "id": "03",
    "name": "CC",
    "age": "31",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}, {
    "id": "04",
    "name": "DD",
    "age": "32",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}]

Jqgrid gave as url based fetch the data then how to put list of list to subgrid? please help me.....

Answer 1

There are different ways to implement your requirements. The answer for example describes how one can fill userdata inside of beforeProcessing based on subData part of every item. I would recommend you additionally to read the answer which seems could makes visualization of your data more comfortable for the user.