Jqgrid Subgrid data fetching from server on expand only

Question

I am using Jqgrid (version 5.2.0 ,paid). I am loading the main grid on a button click on the page(aspx page is with masterpage and update panel) and using code to re-instantiate grid and reload grid on button, datatype: local and data='' on grid creation. I need to load the sub-grid data from server on each main grid row expand only(I will have a lot of data in main grid, loading the sub-grid also on button click is making it slow.)

How to load the subgrid data on row expand?

 function createsamplegrid() {
     jQuery("#grid").jqGrid({
         url: '',
         datatype: 'local',
         colNames: ['Id', 'StoreName', 'Department'],
         colModel: [
    { name: 'ID', index: 'ID', width: 20, stype: 'text' },
    { name: 'StoreName', index: 'StoreName', width: 150 },
    { name: 'Department', index: 'Department', width: 150 }

  ],
         rowNum: 10,
         sortname: 'id',
         viewrecords: true,
         sortorder: "desc",
         caption: "List Employee Details",
         subGrid: true,
         subGridRowExpanded: function (subgridDivId, rowId) {
             var subgridTableId = subgridDivId + "_t",
            localRowData = $(this).jqGrid("getLocalRow", rowId);
             $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
             $("#" + subgridTableId).jqGrid({
                 datatype: 'local',

                 data: '',
                 colNames: ['ID', 'Employee Name'],
                 colModel: [
                    { name: 'ID', index: 'ID', width: 70, align: "left", hidden: true },
                    { name: 'EmployeeName', index: 'EmployeeName', stype: 'text', align: "left" }
                    ],

                 jsonReader: {
                     root: 'gridModel',
                     repeatitems: false
                 },
                 idPrefix: rowId + "_"
             });
         }
     });
 }

 function GetSampleData() {
     $.ajax({
         type: "POST",
         url: 'Sample.aspx/GetSampleDetail',
         data: "",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         async: false,
         success: function (Result) {

             var myjsongrid = $.parseJSON(Result.d);
             SampleData = myjsongrid;
             $('#grid').jqGrid('clearGridData');
             $("#grid").jqGrid('setGridParam', { data: myjsongrid, datatype: 'local' }).trigger('reloadGrid');

         },
         error: function (jqXHR, exception) {

         }
     });
 }

 function ReinstantiateGrid() {
     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_initializeRequest(InitializeRequest);
     prm.add_endRequest(EndRequest);
     function InitializeRequest(sender, args) {
     } // fires after the partial update of UpdatePanel
    
     function EndRequest(sender, args) {//Calls the function again to load the grid after  partial postback 
         createsamplegrid();
         GetSampleData();
     }
 }