jqGrid SubGrid Local Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

CSS

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-y: scroll
}

JavaScript

var mydata = [
        {
            id: 48803, thingy: "DSK1", number: "02200220", status: "OPEN",
            subgridData: [
                {num: 1, item: "Item 1", qty: 3},
                {num: 2, item: "Item 2", qty: 5}
            ]
        },
        {
            id: 48769, thingy: "APPR", number: "77733337", status: "ENTERED",
            subgridData: [
                {num: 3, item: "Item 3", qty: 5},
                {num: 2, item: "Item 2", qty: 10}
            ]
        }
    ];
    
$("#grid").jqGrid({
    datatype: "local",
    data: mydata,
    height: 'auto',
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
    colModel: [
        { name: 'id', width: 60, sorttype: "int", key: true},
        { name: 'thingy', width: 90},
        { name: 'number', width: 80, formatter: "integer" },
        { name: 'status', width: 80}
    ],
    gridview: true,
    autoencode: true,
    pager: '#pagerId',
    caption: "Stack Overflow Subgrid Example",
    subGrid: true,
    subGridOptions: {
        plusicon: "ui-icon-triangle-1-e",
        minusicon: "ui-icon-triangle-1-s",
        openicon : "ui-icon-arrowreturn-1-e"
    },
    shrinkToFit: false,
    width: 377,
    subGridRowExpanded: function(subgrid_id, row_id) {
        var subgrid_table_id = subgrid_id+"_t",
            pager_id = "p_"+subgrid_table_id,
            localRowData = $(this).jqGrid("getLocalRow", row_id);
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table><div id='"+pager_id+"'></div>");
        $("#"+subgrid_table_id).jqGrid({
            datatype: "local",
            data: localRowData.subgridData,
            colNames: ['No', 'Item', 'Qty'],
            colModel: [
                { name: "num", width: 80, key: true },
                { name: "item", width: 130 },
                { name: "qty", width: 70, align: "right" }
            ],
            rowNum: 20,
            idPrefix: "s_" + row_id + "_",
            pager: "#" + pager_id,
            autowidth:...