Stop loading a detailed grid when loading a page

Question

How to stop the DetailGrid function from loading when the page loads. Because I have a button in the main grid to load a detailed grid. Below is the code for a detailed grid.

jQuery().ready(function () {
    jQuery("#list10_d").jqGrid({
        height: 100,
        url: '/JQSandbox/MyFullSubGridData?id=0',
        datatype: "json",
        mtype: 'POST',

        colNames: ['Index', 'Name', 'Department', 'Hire Date', 'Supervisor'],
        colModel: [
            { name: 'employeeID', index: 'employeeID', width: 10 },
            { width: 30 },
            { name: 'employeeDepartment', index: 'employeeDepartment', width: 30 },
            { name: 'employeeHiredate', index: 'employeeHiredate', width: 40, sortable: false },
            { name: 'employeeSup', index: 'employeeSup', formatter: 'checkbox', align: 'center', width: 30, search: false }
        ],

        loadtext: "",
        loadui: "block",

        width: 500,
        rowNum: 5,
        rowList: [5, 10, 20],
        pager: '#pager10_d',
        sortname: 'employeeID',
        viewrecords: true,
        sortorder: "asc",
        multiselect: true,
        caption: "Detail Grid: 1"
    }).navGrid('#pager10_d', { add: false, edit: false, del: false });
});

Answer 1

First you need to set datatype: "local"in the parts grid and change it to datatype: "json" before calling jQuery("#list10_d").trigger("reloadGrid"):

jQuery("#list10_d").jqGrid('setGridParam',{datatype:"json"}).trigger("reloadGrid");