Jqgrid Subgrid data fetching from server on expand only - jqgrid

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();
}
}