jqGrid with columnChooser, how to prevent autoresi

Question

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.

How do I prevent this resize and keep the original width of each column which stay showable?

Or how to set width for a column? I found this code to get the actual width of a column,

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());

But, how do I set the new width and display the result?

I found the Stack Overflow question jqGrid get "th" and "thead" using jQuery about jqGrid structure, but how to use it to resize a column?

I use this code to show the grid:

$(function(){ 'navGrid',
    $("#list").jqGrid({
        url:'myfirstgrid.php?from='+$("#from").val()+'&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');
       }
    });
});

and this in the body part:

<div id="parentDiv"  style="width: 100%"><table id="list"></table><div id="pager"></div></div>

---

Update

I tested it with the new width value. Like:

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

I also modified code to call the columnchooser call like this

jQuery("#list").jqGrid('navButtonAdd','#pager',{
    caption: "Columns",
    title: "Reorder Columns",
    onClickButton : function (){
        jQuery("#list").jqGrid('columnChooser',{shrinkToFit:false,autowidth: false});

And it works great now!

Answer 1

First of all, you should probably use other values of width for all columns. You current values will be expanded to 2000px. It is better to directly set the correct value.

It seems to me that you should use shrinkToFit: false parameter of jqGrid. You should take into consideration some bugs in the width calculation of jqGrid (this and this). If you use the developer version of jqGrid you can use the corresponding bug fixes which I posted: this or this. If you use standard minimized version of jqGrid you can fix the problem just by setting the correct width of the jqGrid.