JQGrid Subgrids

HTML

<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<table id="myTable"/>

JavaScript

$("#myTable").jqGrid({
    datatype:"local",
    colNames:['ID'],
    colModel:[
        {name:'id', index:'id', width:200}
    ],
    multiselect:true,
    subGrid:true,
    height: 300,
    subGridOptions:{
        "reloadOnExpand":true
    },
    subGridRowExpanded:function (subgrid_id, row_id) {
        var subGrid = $("#" + subgrid_id);
        subGrid.html("<table id='subgrid" + subgrid_id + "'/>");
        var subTableElm = subGrid.find('table');
        subTableElm.jqGrid({
            datatype:'local',
            multiselect:true,
            colNames:['SubTableId'],
            colModel:[
                {name:"subTableId", index:"subTableId", width:100}
            ],
            height:'100%'
        });
        subTableElm.jqGrid('addRowData', 0, {subTableId: 'ABC'});
        subTableElm.jqGrid('addRowData', 1, {subTableId: 'XYZ'});
    }
});

$("#myTable").jqGrid('addRowData', 0, {id: 'foo'});
$("#myTable").jqGrid('addRowData', 1, {id: 'bar'});