Question

Is it possible to add data to a subgrid when the data type for the parent jqgrid is of type clientSide?

I am able to add a row to the parent jqgrid using:

jQuery("#myId").addRowData(0, someRowData);

But i’m not to sure how I would add data to the subgrid. Any ideas?

Answer 1

I wasn’t able to identify how to actually add data to a subgrid of jqGrid, but I was able to add data to a grid within another grid.

My master grid looks like:

$("#" + tblNm).jqGrid({
                datatype: "local",
                colNames: ['id', 'Last Name', 'First Name', 'Address'],
                colModel: [{
                    name: 'id',
                    index: 'id',
                    width: 75,
                    sortable: false
                }, {
                    name: 'lastNm',
                    index: 'lastNm',
                    width: 90,
                    sortable: false
                }, {
                    name: 'firstNm',
                    index: 'firstNm',
                    width: 100,
                    sortable: false
                }, {
                    name: 'address',
                    index: 'address',
                    width: 200,
                    align: "left",
                    sortable: false
                }],
                width: "100%",
                height: "100%",
                caption: "Clients",
                jsonReader: {
                    root: "clients",
                    page: "currpage",
                    total: "totalpages",
                    records: "totalrecords",
                    repeatitems: false,
                    id: "id"
                },
                subGrid: true,
                subGridRowExpanded: function(subgrid_id, row_id){
                    console.debug("SubGrid_ID:  " + subgrid_id +
                    "   / row_id:  " +
                    row_id);
                    var subgrid_table_id, pager_id;
                    subgrid_table_id = "mySubGridName" + row_id;
                    pager_id = "p_" + subgrid_table_id;
                    $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>");
                    jQuery("#" + subgrid_table_id).jqGrid({
                        datatype: "local",
                        colNames: ['Order Id', 'Item Name', 'Cost'],
                        colModel: [{
                            name: "ordId",
                            index: "ordId",
                            width: 20,
                            key: true
                        }, {
                            name: "itemName",
                            index: "itemName",
                            width: 130
                        }, {
                            name: "cost",
                            index: "cost",
                            width: 200,
                            align: "left"
                        }],
                        rowNum: 20,
                        caption: "Orders",
                        height: '100%',
                        width: '100%',
                        jsonReader: {
                            root: "orders",
                            page: "currpage",
                            total: "totalpages",
                            records: "totalrecords",
                            repeatitems: false,
                            id: "num"
                        }
                    });
                }
            });

I load the master grid by doing something like:

$("#" + tblNm)[0].addJSONData(wrapper);

Then when I get the subgrid data I do something like:

 // click on the subgrid so that the table is added to the DOM
 // I think there are better ways of doing this... you'll want to look @ the jqGrid documentation
 $("#" + masterTblId + " tr[id='1'] td[role='grid'] a span").click();
 // add the data to the subgrid
 $("#" + subGridId)[0].addJSONData(wrapper);

The most important parts are defining the code in the subgridexpanded property of jqGrid and then being able to force the subgrid to display.

The only problem with this method is that if the user clicks on the subgrid area then it is toggled and when they click on it again it doesn’t show back up properly. I have asked the community about how to fix that here:

Subgrid Caching or Stopping Subgrid data from being removed (jqGrid)