I have a Master detail jqGrid which is working perfectly. The detail grid is being populated based on a cellvalue from the Master grid's selected row and an ajax call to an API i.e. datatype: 'json' and url: 'http://myServiceurl/rowdata.id'.

However, for certain Master rows the data set for the detail row so it's taking a few moments to load and the detail grid shows "Loading...". This is perfectly fine, until the user clicks a different row in the master grid while the detail grid is still "Loading...". This is a problem because I am loading some additional info on the detail grid's caption and while the data on the detail grid is still loading from previous rowSelect the detail grid's caption changes to reflect the current master grid's row selected but the actual table data is from the previous row selected in the master grid.

The master-detail grid is coded as below jqgrid option on the master grid-

onSelectRow: function(ids) {      //load the detail table tabDiv2
                $("#"+divToHide).show();    //show the hidden div for detail grid
                var rowdata = jQuery("#"+tabDiv).getRowData(ids);
                    jQuery("#"+tabDiv2).jqGrid('setGridParam',{url:useruri+"/"+rowdata.dbsid,
                                                           datatype: 'json'})
                    jQuery("#"+tabDiv2).jqGrid('setCaption',"Database Name: "+rowdata.dbname)
                    .trigger('reloadGrid');
                },

One solution I could imagine is using beforeSelectRow option on the master grid and check if the detail grid is still being loaded-

beforeSelectRow: function(){
       //check if detail grid is fully loaded <--
       //if fully loaded return true else return false
}

How do I check if the detail grid is fully loaded? I have tried $("#"+tabDiv2)[0].grid but it always returns true since I think the overall DOM element of the grid gets loaded before the data gets loaded inside of it. I have tried checking number of records using $("#"+tabDiv2).getGridParam("records") but this may not always work, since the detail grid not having any row for a selected master grid row is a valid scenario and will permanently disable rowSelect on the master grid. What else are my options?

jqGrid set $("#"+tabDiv2)[0].grid.hDiv.loading to true during Ajax request to load the grid is pending. Then you can use just the following callback in the first grid

beforeSelectRow: function () {
    var detailGrid = $("#"+tabDiv2)[0];
    return detailGrid != null && detailGrid.grid != null && detailGrid.grid.hDiv.loading ?
        false : true;
}