Column reorder not affected in main grid while subgrid expanding in Jqgrid?

Question

I have Grid and subgrid. I reorder the column in main grid. Changing the position of the column in main grid affects the column values in subgrid while subgrid is expanded.

jQuery("#list14").jqGrid({ 
url:'server.php?q=2', 
datatype: "json",
height: 200, 
colNames:['Inv No','Date', 'Client','Amount','Tax','Total','Notes'], 
colModel:[ {name:'id',index:'id',width:55}, 
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100}, 
{name:'amount',index:'amount',width:80, align:"right"}, 
{name:'tax',index:'tax', width:80,align:"right"}, 
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false} ], 
rowNum:10,
rowList:[10,20,30], 
pager: '#pager14', 
sortname: 'id', 
viewrecords:true, 
sortorder: "desc", 
sortable:true,
subGrid : true, 
subGridUrl:'subgrid.php?q=3', 
subGridModel: [{ name :['No','Item','Qty','Unit','Line Total'], 
width : [55,200,80,80,80],
params:['invdate']} ] , caption: "Subgrid with JSON Data" });
jQuery("#list14").jqGrid('navGrid','#pager14',{edit:false,add:false,del:false});

Answer 1

I got a workaround for this issue. I have closed the subgrid first, after the start the process for column re order in parent grid.

I had got the code from the Oleg's answer.

The below code add before the loadComplete function.

sortable: {
           options: {                           
                        start: function(event, ui) {                                
                            $(".ui-subgrid").hide(3);
                            $('#list14 tr td').each(function() {
                            $(".ui-sgcollapsed").removeClass("sgexpanded").addClass("sgcollapsed");
                            $(".ui-sgcollapsed.sgcollapsed").find("span").removeClass("ui-icon-minus").addClass("ui-icon-plus");
                         });
                        }
                   }

                },