jqGrid Problem Binding Subgrid

I have a jqGrid that is not correctly displaying the subgrid rows. When I load the page, the regular grid rows display fine as well as the plus sign next to each of them, but when I click the plus button to expand them, the "Loading..." message just remains and nothing happens. I don't know if it makes a difference, but I am trying to do it on client side (loadonce: true).

Here is the code for creating the grid:

$("#Grid1").jqGrid({
// setup custom parameter names to pass to server
prmNames: {
    search: null,
    nd: null,
    rows: "num开发者_Go百科Rows",
    page: "page",
    sort: "sortField",
    order: "sortOrder"
},
datatype: function(postdata) {
    $(".loading").show(); // make sure we can see loader text
    $.ajax({
        url: 'WebServices/GetJSONData.asmx/getGridData',
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(postdata),
        dataType: "json",
        success: function(data, st) {
            if (st == "success") {
                var grid = $("#Grid1")[0];
                grid.addJSONData(JSON.parse(data.d));
                //Loadonce doesn't work, have to do its dirty work
                $('#Grid1').jqGrid('setGridParam', { datatype: 'local' });
                //After rows are loaded, have to manually load subgrid rows
                var subgridData = JSON.parse(data.d).subgrid;
                var lista = jQuery("#Grid1").getDataIDs();
                var rowData;
                //Iterate over each row in grid
                for (i = 0; i < lista.length; i++) {
                    //Get current row data
                    rowData = jQuery("#Grid1").getRowData(lista[i]);

                }
            }
        },
        error: function() {
            alert("Error with AJAX callback");
        }
    });
},
// this is what jqGrid is looking for in json callback
jsonReader: {
    root: "rows",
    page: "page",
    total: "totalpages",
    records: "totalrecords",
    cell: "cell",
    id: "id", //index of the column with the PK in it 
    userdata: "userdata",
    repeatitems: true
},
coNames: ['Inv No', 'Amount', 'Store', 'Notes'],
colModel: [
    { name: 'InvNum', index: 'InvNum', width: 200 },
    { name: 'Amount', index: 'Amount', width: 55 },
    { name: 'Store', index: 'Store', width: 50 },
    { name: 'Notes', index: 'Notes', width: 100 }
],
subGrid: true,
subGridModel: [{
    name: ['InvNum', 'Name', 'Qauntity'],
    width: [55, 200, 80],
    params: ['InvNum']
}],
rowNum: 10,
rowList: [10, 20, 50],
pager: '#Div1',
viewrecords: true,
width: 500,
height: 230,
scrollOffset: 0,
loadonce: true,
ignoreCase: true,
gridComplete: function() {
    $(".loading").hide();
}
}).jqGrid('navGrid', '#Div1', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true });

Here the code that I am using in the webservice call to create the JSON data:

IEnumerable orders = getOrders();
IEnumerable items = getItems();

int k = 0;

var jsonData = new
{
    totalpages = totalPages, //--- number of pages
    page = pageIndex, //--- current page
    totalrecords = totalRecords, //--- total items
    rows = (
        from row in orders
        select new
        {
            id = k++,
            cell = new string[] {
                row.InvNum.ToString(), row.Amount.ToString(), row.Store, row.Notes
            }
        }
    ).ToArray(),
    subgrid = (
        from row in items
        select new
        {
            cell = new string[] {
                row.InvNum.ToString(), row.Name, row.Quantity.ToString()
            }
        }
    ).ToArray()
};

result = Newtonsoft.Json.JsonConvert.SerializeObject(jsonData);