title: jqGrid hidden plus/minus/open icon column make subgrid less wide as main row
body: <p>Following to this <a href="https://stackoverflow.com/questions/12439147/in-a-working-jqgrid-with-subgrid-how-i-can-hide-the-column-where-appears-the-plu">post</a> about hiding plus/minus/open icon column, I have applied these suggests, so in CSS file :</p>
  
  <pre><code>.subgrid-cell { display: none; }
  </code></pre>
  
  <p>All is OK :</p>
  
  <p><img src="https://i.stack.imgur.com/GYd6d.png" alt="enter image description here"></p>
  
  <p>but the subgrid don't fill the width of right column of main grid.
  <img src="https://i.stack.imgur.com/LQsqA.png" alt="enter image description here"></p>
  
  <p>Please, is there a mistake in my code, </p>
  
  <pre><code>jQuery(document).ready(function ($) {
  var OldSelectedRow=null;
  var height=$('body').height()-210;
  var numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
  var heightRows=numRows*23;
  var myGrid = $("#tab22");
  myGrid.jqGrid({
      caption:"Recherche d'un ARTICLE dans les PARCS CLIENTS",
      hidegrid:false,
      url:'sub22.php',
      datatype: "json",
      height:heightRows,
      shrinkToFit: true,
      rowNum:numRows,
      rownumbers:true,
      rownumWidth: 40, 
      gridview: true,
      colNames:['Id','Code', 'Désignation', 'Famille','S/famille','Marque','Matière','Réf.constructeur','PV base'],
      colModel:[ 
          {name:'a.id',index:'a.id', width:60, align:"right",hidden:true}, 
          {name:'a.code',index:'a.code', width:150}, 
          {name:'a.descr',index:'a.descr', width:200}, 
          {name:'f.code',index:'f.code', width:80}, 
          {name:'s.code',index:'s.code', width:80}, 
          {name:'k.code',index:'k.code', width:80}, 
          {name:'m.code',index:'m.code', width:80},
          {name:'a.refc',index:'a.refc', width:150},
          {name:'t.pnc',index:'t.pnc', width:80, align:"right"}
      ], 
      pager: '#tab22p', 
      sortname: 'a.code', 
      sortorder: "asc", 
      viewrecords: true,
      emptyrecords: 'Aucune donnée correspondante...',        
      altRows:true,
      altclass:'myAltRowClass',
      onSortCol: function (index, idxcol, sortorder) {
          //  montre la colonne sélectionnée pour le tri de la grille
          if (this.p.lastsort &gt;= 0 &amp;&amp; this.p.lastsort !== idxcol
                          &amp;&amp; this.p.colModel[this.p.lastsort].sortable !== false) {
                  $(this.grid.headers[this.p.lastsort].el).find("&gt;div.ui-jqgrid-sortable&gt;span.s-ico").show();
                  $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
          }
          $(this.grid.headers[idxcol].el).addClass('ui-state-active');
      },
      gridComplete:function(){
          OldSelectedRow=null;
          colModel = myGrid.jqGrid('getGridParam', 'colModel');
          sortName = myGrid.jqGrid('getGridParam', 'sortname');
          $('#gbox_' + $.jgrid.jqID(myGrid[0].id) +
                  ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                  var cmi = colModel[i], colName = cmi.name;
                  if (cmi.sortable !== false) {
                          $(this).find('&gt;div.ui-jqgrid-sortable&gt;span.s-ico').show();
                  } else if (!cmi.sortable &amp;&amp; colName !== 'rn' &amp;&amp; colName !== 'cb' &amp;&amp; colName !== 'subgrid') {
                          $(this).find('&gt;div.ui-jqgrid-sortable').css({cursor: 'default'});
                  }
                  if (cmi.name === sortName) {
                          $(this).addClass('ui-state-active');
                          //alert(i);
                          var gridId = myGrid.jqGrid('getDataIDs');
                          for (var countRow = 0; countRow &lt; gridId .length; countRow ++)
                          {
                              var rowId = gridId [countRow ];
                              var dataFromTheRow = myGrid.jqGrid ('getRowData', rowId);
                              myGrid.jqGrid('setCell',rowId, i, '','ui-widget-header');
                              myGrid.jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
                          }
                  }
          });
      },
      onSelectRow:function(id,status){
          if(OldSelectedRow!=id){
              if(OldSelectedRow!=null){
                  myGrid.jqGrid ('collapseSubGridRow', OldSelectedRow);
                  $('#tab22_'+OldSelectedRow+'_t').remove();
                  $('#'+OldSelectedRow).removeClass('ui-state-highlight');
              }
              $('#'+id).addClass('ui-state-highlight');
              OldSelectedRow=id;
              myGrid.jqGrid('expandSubGridRow',id);
          }else{
                  myGrid.jqGrid ('collapseSubGridRow', id);
                  $('#tab22'+id+'_t').remove();
                  $('#'+id).removeClass('ui-state-highlight');
                  OldSelectedRow=null;
          }
      },
      subGrid: true,
      subGridRowExpanded: function(subgrid_id, row_id) { 
          rowdata = $("#tab22").jqGrid('getRowData',row_id);
          var art=rowdata['a.id'],lastId;
          var subgrid_table_id, pager_id; 
          subgrid_table_id = subgrid_id+"_t"; 
          pager_id = "p_"+subgrid_table_id; 
          $("#"+subgrid_id).html("&lt;table id='"+subgrid_table_id+"' class='scroll'&gt;&lt;/table&gt;&lt;div id='"+pager_id+"' class='scroll'&gt;&lt;/div&gt;"); 
          $("#"+subgrid_table_id).jqGrid({ 
              url:"sg22.php?id="+row_id+"&amp;art="+art, 
              datatype: "json", 
              colNames: ['Id','Groupe','Client', 'Nom','Ville','Matériel','Marque','Machine','Série','Type','Modèle','Désignation','N° série'],
              colModel: [ 
                  {name:'p.id',index:'p.id', width:60, align:"right",hidden:true}, 
                  {name:'g.code',index:'g.code', width:80}, 
                  {name:'c.code',index:'c.code', width:60},
                  {name:'c.descr',index:'c.descr', width:200}, 
                  {name:'c.ville',index:'c.ville', width:200}, 
                  {name:'q.code',index:'q.code',width:80},
                  {name:'k.code',index:'k.code', width:80}, 
                  {name:'2h.code',index:'2h.code', width:60}, 
                  {name:'2s.code',index:'2s.code', width:60}, 
                  {name:'2t.code',index:'2t.code', width:60}, 
                  {name:'2m.code',index:'2m.code', width:60}, 
                  {name:'2m.descr',index:'2m.descr', width:200}, 
                  {name:'p.numserie',index:'p.numserie', width:80}
              ], 
              pager: pager_id, 
              rownumbers: true,
              rowNum:15,
              rowNumWidth:40,             
              viewrecords: true,
              emptyrecords: 'Aucune donnée correspondante...',    
              caption:"Liste des PARCS CLIENTS contenant l'ARTICLE sélectionné",
              hidegrid:false,
              rownumWidth: 40,
              autowidth:true,     
              altRows:true,
              altclass:'myAltRowClass',
              sortname: 'c.code', 
              sortorder: "asc", 
              height: 345,
              onSortCol: function (index, idxcol, sortorder) {
                  //  montre la colonne sélectionnée pour le tri de la grille
                  if (this.p.lastsort &gt;= 0 &amp;&amp; this.p.lastsort !== idxcol
                                  &amp;&amp; this.p.colModel[this.p.lastsort].sortable !== false) {
                          $(this.grid.headers[this.p.lastsort].el).find("&gt;div.ui-jqgrid-sortable&gt;span.s-ico").show();
                          $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                  }
                  $(this.grid.headers[idxcol].el).addClass('ui-state-active');
              },
              onSelectRow:function(id,status){
                  if(lastId!=id){
                      if(lastId!=null){
                          $("#"+subgrid_table_id).jqGrid ('collapseSubGridRow', lastId);
                          $('#'+subgrid_table_id+'t').remove();
                          $('#'+id).removeClass('ui-state-highlight');
                      }
                      $('#'+id).addClass('ui-state-highlight');
                  }
                  lastId=id;
                  $("#"+subgrid_table_id).jqGrid('expandSubGridRow',id);
              },
              gridComplete:function(){
                  //  montre la colonne triée au chargement des données
                  colModel = $("#"+subgrid_table_id).jqGrid('getGridParam', 'colModel');
                  sortName = $("#"+subgrid_table_id).jqGrid('getGridParam', 'sortname');
                  $('#gbox_' + $.jgrid.jqID($("#"+subgrid_table_id)[0].id) +
                          ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                          var cmi = colModel[i], colName = cmi.name;
                          if (cmi.sortable !== false) {
                                  $(this).find('&gt;div.ui-jqgrid-sortable&gt;span.s-ico').show();
                          } else if (!cmi.sortable &amp;&amp; colName !== 'rn' &amp;&amp; colName !== 'cb' &amp;&amp; colName !== 'subgrid') {
                                  $(this).find('&gt;div.ui-jqgrid-sortable').css({cursor: 'default'});
                          }
                          if (cmi.name === sortName) {
                                  $(this).addClass('ui-state-active');
                                  var gridId = $("#"+subgrid_table_id).jqGrid('getDataIDs');
                                  for (var countRow = 0; countRow &lt; gridId .length; countRow ++)
                                  {
                                      var rowId = gridId [countRow ];
                                      var dataFromTheRow = $("#"+subgrid_table_id).jqGrid ('getRowData', rowId);
                                      $("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
                                      $("#"+subgrid_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
                                  }
                          }
                  });
              },
              subGrid: true,
              subGridRowExpanded: function(subgrid2_id, row2_id) { 
                  rowdata = $(this).jqGrid('getRowData',row2_id);
                  var parc=rowdata['p.id'],lastId=null;
                  var subgrid2_table_id, pager2_id; 
                  subgrid2_table_id = subgrid2_id+"_tt"; 
                  pager2_id = "p_"+subgrid2_table_id; 
                  $("#"+subgrid2_id).html("&lt;table id='"+subgrid2_table_id+"' class='scroll'&gt;&lt;/table&gt;&lt;div id='"+pager2_id+"' class='scroll'&gt;&lt;/div&gt;"); 
                  $("#"+subgrid2_table_id).jqGrid({ 
                      url:"sg22b.php?id="+row2_id+"&amp;parc="+parc, 
                      datatype: "json",
                      caption:"Détail du PARC",
                      hidegrid:false,
                      colNames:['Id','Ensemble','Article', 'Désignation', 'Famille','S/Famille','Matière','PV base','% Remise','PV net'],
                      colModel:[ 
                          {name:'a.id',index:'a.id', width:60, align:"right",hidden:true}, 
                          {name:'c.code',index:'c.code', width:100,sortable:false}, 
                          {name:'a.code',index:'a.code', width:100,sortable:false}, 
                          {name:'a.descr',index:'a.descr', width:400,sortable:false}, 
                          {name:'f.code',index:'f.code', width:80,sortable:false},
                          {name:'s.code',index:'s.code', width:80,sortable:false},
                          {name:'m.code',index:'m.code', width:80,sortable:false},
                          {name:'t.pnc',index:'t.pnc', width:80,align:'right',sortable:false},
                          {name:'rem',index:'rem', width:80,align:'center',sortable:false},
                          {name:'pv',index:'pv', width:80,align:'right',sortable:false}
                      ], 
                      pager: pager2_id, 
                      rownumbers: true, 
                      viewrecords: true,
                      emptyrecords: 'Aucune donnée correspondante...',        
                      rownumWidth: 40, 
                      altRows:true,
                      altclass:'myAltRowClass',
                      sortname: 'c.code', 
                      sortorder: "asc", 
                      scroll:true,
                      maxheight: 230,
                      onSortCol: function (index, idxcol, sortorder) {
                          //  montre la colonne sélectionnée pour le tri de la grille
                          if (this.p.lastsort &gt;= 0 &amp;&amp; this.p.lastsort !== idxcol
                                          &amp;&amp; this.p.colModel[this.p.lastsort].sortable !== false) {
                                  $(this.grid.headers[this.p.lastsort].el).find("&gt;div.ui-jqgrid-sortable&gt;span.s-ico").show();
                                  $(this.grid.headers[this.p.lastsort].el).removeClass('ui-state-active');
                          }
                          $(this.grid.headers[idxcol].el).addClass('ui-state-active');
                      },
                      gridComplete:function(){
                          //  montre la colonne triée au chargement des données
                          colModel = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'colModel');
                          sortName = $("#"+subgrid2_table_id).jqGrid('getGridParam', 'sortname');
                          $('#gbox_' + $.jgrid.jqID($("#"+subgrid2_table_id)[0].id) +
                                  ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
                                  var cmi = colModel[i], colName = cmi.name;
                                  if (cmi.sortable !== false) {
                                          $(this).find('&gt;div.ui-jqgrid-sortable&gt;span.s-ico').show();
                                  } else if (!cmi.sortable &amp;&amp; colName !== 'rn' &amp;&amp; colName !== 'cb' &amp;&amp; colName !== 'subgrid') {
                                          $(this).find('&gt;div.ui-jqgrid-sortable').css({cursor: 'default'});
                                  }
                                  if (cmi.name === sortName) {
                                          $(this).addClass('ui-state-active');
                                          var gridId = $("#"+subgrid2_table_id).jqGrid('getDataIDs');
                                          for (var countRow = 0; countRow &lt; gridId .length; countRow ++)
                                          {
                                              var rowId = gridId [countRow ];
                                              var dataFromTheRow = $("#"+subgrid2_table_id).jqGrid ('getRowData', rowId);
                                              $("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '','ui-widget-header');
                                              $("#"+subgrid2_table_id).jqGrid('setCell',rowId, i, '',{'border-top':0,'border-left':0});
                                          }
                                  }
                          });
                      }
                  })
                  $("#"+subgrid2_table_id).jqGrid('navGrid',"#"+pager2_id,{edit:false,add:false,del:false,search:false});
                  $("#"+subgrid2_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
              }
          }); 
          $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false});
          $("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
          $("#"+subgrid_table_id).jqGrid('hideCol', 'subgrid');
      },
      subGridRowColapsed: function(subgrid_id, row_id) { 
          // this function is called before removing the data 
          var subgrid_table_id; 
          subgrid_table_id = subgrid_id+"_t"; 
          $("#"+subgrid_table_id).remove();
          myGrid.jqGrid('resetSelection');            
      }
  });
  myGrid.jqGrid('navGrid','#tab22p',{search:false,del:false,edit:false,add:false});   
  myGrid.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
  myGrid.closest("div.ui-jqgrid-view")
          .children("div.ui-jqgrid-titlebar")
          .css({
              textAlign: "center"
          })
          .children("span.ui-jqgrid-title")
          .css({
              float: "none",
              color:'red',
              fontSize:'16px'
          });
  myGrid.jqGrid('hideCol', 'subgrid');
  $(window).bind('resize', function() {
          myGrid.jqGrid('setGridWidth',$('body').width()-22);
          var height=$('body').height()-210;
          numRows=Math.floor(height/23)-(Math.floor(height/23)%5);
          heightRows=numRows*23;
          myGrid.jqGrid('setGridParam', {height:heightRows,rowNum:numRows});
          myGrid.jqGrid('setGridHeight',heightRows);
          myGrid.trigger("reloadGrid");
  }).trigger('resize');});
  </code></pre>
  
  <p>or is there some way to solve or turnaround this trouble ?</p>
  
  <p>Many thanks to whose who could bring me some help. have a nice day</p>
  
  <p>JiheL</p>