jQuery Grid Plugin - jqGrid

Hi,

I am using grid as a subgrid with datatype as a function

jQuery("#tblProcs").jqGrid({
        postData: { 'TemplID': TemplId },
        datatype: function(pdata) {
            //jQuery("#lui_NodeTable, #load_NodeTable").show();
            jQuery.ajax({ type: "POST",
                url: "../asmx/AddRoom.asmx/GetTemplProcs",
                dataType: "json",
                data: JSON.stringify(pdata),
                contentType: "application/json;charset=utf-8",
                processData: false,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    //jQuery("#lui_NodeTable, #load_NodeTable").hide();
                    ajaxError("GetTemplProcs", XMLHttpRequest, textStatus, errorThrown);
                },
                success: function(result) {

                    grdData = JSON.parse(result.d);
                    var thegrid = jQuery("#tblProcs")[0];
                    thegrid.addJSONData(grdData);
                    //  jQuery("#lui_NodeTable, #load_NodeTable").hide();
                }
            })
        },

        colNames: ['Name', 'Host Name', 'Location', 'Port', 'Secure Port', 'User Name', 'Password'],
        colModel: [
    { name: 'Name', index: 'Name', width: 100, sortable: false },
    { name: 'IPAddr', index: 'IPAddr', width: 100, sortable: false },
    { name: 'Loc', index: 'Loc', width: 100, sortable: false },
    { name: 'Port', index: 'Port', width: 50, sortable: false },
    { name: 'SecPort', index: 'SecPort', width: 50, sortable: false },
    { name: 'UserName', index: 'UserName', width: 80, sortable: false },
    { name: 'Pwd', index: 'Pwd', width: 80, sortable: false}],
        rowNum: 10,
        rowList: [10, 25, 50],
        pager: '#divProcs',
        viewrecords: false,
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id) {
          
            var subgrid_table_id;
            subgrid_table_id = subgrid_id + "_t";
            jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
            jQuery("#" + subgrid_table_id).jqGrid({
            postdata: { 'ProcID': row_id },
            datatype: function(pdata) {
                    jQuery.ajax({ type: "POST",
                        url: "../asmx/AddRoom.asmx/GetTemplSym",
                        dataType: "json",
                        data: JSON.stringify(pdata),
                        contentType: "application/json;charset=utf-8",
                        processData: false,
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            ajaxError("GetTemplProcs", XMLHttpRequest, textStatus, errorThrown);
                        },
                        success: function(result) {
                            grdData = JSON.parse(result.d);
                            var thegrid = jQuery("#" + subgrid_table_id)[0];
                            thegrid.addJSONData(grdData);
                        }
                    })
                },
                colNames: ['Name', 'IPID', 'Version', 'Use SSL'],
                colModel: [
                { name: "Name", index: "Name", width: 80, key: true, sortable: false },
                { name: "IPID", index: "IPID", width: 130, sortable: false },
                { name: "Version", index: "Version", width: 80, align: "right", sortable: false },
                { name: "UseSSL", index: "UseSSL", width: 80, align: "right", sortable: false}],
                rowNum: 10
            })
        }
    });

If I put  a break point in Jquery.js where  it sends data

try {
            xhr.send(s.data);
        } catch(e) {
            jQuery.handleError(s, xhr, null, e);
        }

I see that the postdata is not being serailized.