JqGrid Reload not working

I'm having an issue with Jqgrid, I've got two grids on a single page and onclick on a row of the first grid needs to reload the second grid.

I'm 100% sure the second grid is configured correctly is if I manually pass a hard coded id it populates correctly.

Just the reload function is not working. Please could someone assist. Below is the jquery code for both grids

$(document).ready(function() {      
    jQuery("#list2").jqGrid({ 
        url:'classes/ListServices.php', 
        datatype: "json",
        mtype: 'POST', 
        colNames: ['Id','Description', 'Details', 'Cost in (R)'], 
        colModel: [ 
            {name:'Id',index:'Id', align:"center", width:30}, 
            {name:'Description',index:'Description', align:"center"}, 
            {name:'Details',index:'Details', align:"left"}, 
            {name:'Cost',index:'Cost',align:"center",width:30,formatter:'currency'},
        ],
        width: 780,
        height: 100, 
        rowNum:18, 
        pager: '#pager1',
        loadonce: true,
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc", 
        caption:"Services List",
        multiselect: false,
        onSelectRow: function(ids) {
            if(ids == null) { 
                ids=0; 
                if(jQuery("#list3").jqGrid('getGridParam','records') >0 ) {
                    jQuery("#list3").jqGrid('setGridParam',
                                           {url:"subgrid.php?q=1&id="+ids,page:1});
                    jQuery("#list3").jqGrid.trigger('reloadGrid'); 
                } 
            } 
            else { 
                jQuery("#list3").jqGrid('setGridParam',
                                        {url:"subgrid.php?q=1&id="+ids,page:1}); 
                jQuery("#list3").jqGrid.trigger('reloadGrid'); 
            }       
        }  
    }); 

    jQuery("#list2").jqGrid('navGrid','#pager2',
                            {edit:false,add:false,del:false,multipleSearch:true});
    jQuery("#list2").jqGrid('filterToolbar',
                            {stringResult: true,searchOnEnter : false});

    jQuery("#list3").jqGrid({ 
        url:'classes/ListServicesDetails.php?Id=2', 
        datatype: "json",
        mtype: 'POST', 
        colNames: ['Id','ServiceId', 'Description', 'Details', 'Cost in (R)'], 
        colModel: [ 
           {name:'Id',index:'Id', align:"center", width:30},
           {name:'ServiceId',index:'ServiceId', align:"center", width:30},  
           {name:'Description',index:'Description', align:"center"}, 
           {name:'Details',index:'Details', align:"left"}, 
           {name:'Cost',index:'Cost',align:"center",width:30,formatter:'currency'},
        ],
        width: 780,
        height: 200, 
        rowNum:18, 
        pager: '#pager2',
        loadonce: true,
        sortname: 'id',
        viewrecords: true,
        sortorder: "asc", 
        caption:"Services Details List",
        multiselect: false,
        onSelectRow: function(id) {
            alert(id);
        }  
    }); 
    jQuery("#list3").jqGrid('navGrid','#pager2',
                            {edit:false,add:false,del:false,multipleSearch:true});
});

Please if someone could assist me ...

Thanks

Both jqGrids has parameters loadonce: true. It means that after the first loading the datatype of the grids will be changed from "json" to "local". To reload the second grid you should reset the datatype parameter to "json" together with url and page parameters.