jQgrid Expand Subgrid Demo

This is a demo on how to implement the jQgrid subgrid

by KevinGabbert

HTML

<link rel="stylesheet" href="http://imaginationeverywhere.info/jqgrid/css/jquery-ui-1.8.19.custom.css">
<link rel="stylesheet" href="http://imaginationeverywhere.info/jqgrid/css/ui.jqgrid.css">
<script src="http://imaginationeverywhere.info/jqgrid/js/grid.locale-en.js"></script>
<script src="http://imaginationeverywhere.info/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://imaginationeverywhere.info/jqgrid/js/jquery-ui-1.8.2.custom.min.js"></script>
<script src="http://imaginationeverywhere.info/jqgrid/js/grid.subgrid.js"></script>
<table id="grid">
</table>

JavaScript

$(document).ready(function() {
    var data = [
        [
            'Message Icon', 
             2223345, 
             '04/21/2012',
             '2:00pm ET',
             'Medical Claims',
             'Member',
             'R99999999 ',
             'John Sample',
             '010',
             'Expand Arrow'
        ], 
        [
            'Message Icon', 
             2223344,
            '04/19/2012',
            '04/22/2012',
            'Benefit Question ',
            'Member',
            'R99999997',
            'Joe Sample',
            '010',
            'Expand Arrow'
        ], 
        [
            'Message Icon',
            2223343,
            '2:00pm ET',
            '10:00am ET',
            'ID Card',
            'Plan',
            'R99999996',
            'John Sample',
            '010',
            'Expand Arrow'
        ], 
        [
            'Message Icon', 
            2223342,
            '04/19/2012', 
            '04/22/2012',
            'Benefit Question ',
            'Member',
            'R99999997',
            'Joe Sample',
            '010',
            'Expand Arrow'
        ], 
        [
            'Message Icon', 
            2223341,
            '04/19/2012',
            '04/22/2012',
            'Benefit Question',
            'Member',
            'R99999997',
            'Joe Sample',
            '010',
            'Expand Arrow'
        ]
    ];
    var subgridData = [
        [
            'The data in this row1', 
            'The data in this row2'
        ]
    ];
    //var globalSubGridNames = [];
    $("#grid").jqGrid({
        datatype: "local",
        height: 250,
        colNames: [   
                    '', 
                   'Message ID',
                    'Last Update', 
                    'Service Type', 
                    'Orig. Type', 
                    'Contract ID', 
                    'Member Name', 
                    'SP Code',
                    ''
        ],
       ...