title: jqGrid with columnChooser, how to prevent autoresize after columns choice?
body: <p>I have a large table, 24 col, 2000 pixels large, and want that each column width stay as is after choosing the visibility or reorder columns. But the component seem to shrink the columns to fit the grid global size at the end.</p>
  
  <p>How do I prevent this resize and keep the original width of each column which stay showable?</p>
  
  <p>Or how to set width for a column?
  I found this code to get the actual width of a column,</p>
  
  <pre><code>mygrid=$("#list");
  var width = 0, i = 0, headers = mygrid[0].grid.headers, l = headers.length;
  var th = headers[4].el; // 5 th column in this sample
  alert($(th).width());
  </code></pre>
  
  <p>But, how do I set the new width and display the result?</p>
  
  <p>I found the Stack&nbsp;Overflow question <em><a href="https://stackoverflow.com/questions/3462071/jqgrid-get-th-and-thead-using-jquery/3463002#3463002">jqGrid get "th" and "thead" using jQuery</a></em> about jqGrid structure, but how to use it to resize a column?</p>
  
  <p>I use this code to show the grid:</p>
  
  <pre><code>$(function(){ 'navGrid',
      $("#list").jqGrid({
          url:'myfirstgrid.php?from='+$("#from").val()+'&amp;to='+$("#to").val(),
          datatype: 'json',
          loadError: function(xhr,status,error){alert(status+" "+error);},
          mtype: 'GET',
          colNames:['id','date','heure','expediteur','refcommande','retour','differe','identiclient','nomclient','adresse','postal','ville','zone','pays','telephone','nature','nbcolis','poids','typeexpe','message','portpaye','montantCR','valeur','aiguillage'],
          colModel :[
              {name:'id', index:'id', width:40, sorttype:"int",sortable:true,align:'right',autowidth: false},
              {name:'datedemande', index:'datedemande', width:40,align:'center',datefmt:'d-m-Y',autowidth: false},
              {name:'heuredemande', index:'heure', width:35, align:'center',autowidth: false},
              {name:'expediteur', index:'expediteur', width:60, align:'left',autowidth: false},
              {name:'refcommande', index:'refcommande', width:60, align:'left',autowidth: false},
              {name:'retour', index:'retour', width:15, sortable:false, align:'center',autowidth: false},
              {name:'datediffere', index:'datediffere', width:35, align:'center',autowidth: false},
              {name:'identiclient', index:'identiclient', width:35,aligne:'left',autowidth: false},
              {name:'nomclient', index:'nomclient', width:70,aligne:'left',autowidth: false},
              {name:'adresse', index:'adresse', width:90,align:'left'},
              {name:'postal', index:'postal', width:35,align:'right'},
              {name:'ville', index:'ville', width:55},
              {name:'zone', index:'zone', width:55},
              {name:'pays', index:'pays', width:30},
              {name:'telephone', index:'telephone', width:55,align:'right'},
              {name:'nature', index:'nature', width:55},
              {name:'nbcolis', index:'nbcolis', width:30, align:'right'},
              {name:'poids', index:'poids', width:30, align:'right'},
              {name:'typeexpe', index:'typeexpe', width:30},
              {name:'message', index:'message', width:70,jsonmap:'message'},
              {name:'portpaye', index:'portpaye', width:30 },
              {name:'montantCR', index:'montantCR', width:30, align:'right'},
              {name:'valeur', index:'valeur', width:30, align:'right'},
              {name:'aiguillage', index:'aiguillage', width:45}
          ],
          jsonReader: { repeatitems: false,root:"rows" },
          pager: '#pager',
          rowNum:10,
          rowList:[10,15,20,25,30,40,50,100],
          sortname: 'id',
          sortorder: 'desc',
          viewrecords: true,
          autowidth: false,
          eight:"100%",
          idth:2000,
          iddengrid: false,
          overrows:true,
          ortable:true,
          ixed:true,
          caption: 'Historique demandes'
      });
      jQuery("#list").jqGrid('navGrid',"#pager",{edit:false,add:false,del:false,search:true},{},{},{},{multipleSearch:true});
        jQuery("#list").jqGrid('navButtonAdd','#pager',{
        caption: "Columns",
        title: "Reorder Columns",
        onClickButton : function (){
            jQuery("#list").jqGrid('columnChooser');
         }
      });
  });
  </code></pre>
  
  <p>and this in the body part:</p>
  
  <pre><code>&lt;div id="parentDiv"  style="width: 100%"&gt;&lt;table id="list"&gt;&lt;/table&gt;&lt;div id="pager"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>I tested it with the new width value. Like:</p>
  
  <pre><code>pager: '#pager',
  rowNum: 10,
  rowList: [10,15,20,25,30,40,50,100],
  sortname: 'id',
  sortorder: 'desc',
  viewrecords: true,
  autowidth: false,  //ne pas recalculer la largeur de chaque colonne.
  height: "100%",
  width: '3000px',
  hiddengrid: false,
  hoverrows: true,
  sortable: true,
  fixed: true,
  ShrinkToFit: false,
  caption: 'Historique demandes' ,
  shrinkToFit: false
  </code></pre>
  
  <p>I also modified code to call the columnchooser call like this</p>
  
  <pre><code>jQuery("#list").jqGrid('navButtonAdd','#pager',{
      caption: "Columns",
      title: "Reorder Columns",
      onClickButton : function (){
          jQuery("#list").jqGrid('columnChooser',{shrinkToFit:false,autowidth: false});
  </code></pre>
  
  <p>And it works great now!</p>