jQuery Grid Plugin - jqGrid

Tony,

I submited this earlier today but I've been playing and can add some more behavior that I noticed.

If the columns don't fill the grid the grid remains unchanged.

autowidth = true

Everytime the grid is paged (next or back) all of the columns shrink EXCEPT the last column gets bigger and the grid shrinks by a few pixels.  Continous paging and the columns (and grid) keep getting smaller and smaller except for the last column get wider and wider.

thanks,  Jim

Here is one of my grids:

<script>
// ********************************************************************************************
//  Single Combined List Option
// ********************************************************************************************
    $(document).ready(function()
  {
  $("#slist").jqGrid(
   {
    url:'Users.cfc?method=GetAllCases&myacct=<cfoutput>#session.bizorg_objid#</cfoutput>', //CFC that will return the users
    datatype: 'json', //We specify that the datatype we will be using will be JSON
    colNames:['Case ID','Priority','Site ID','Site Name','Status','Reported Problem','Created','Sort Date','Ref No','Acct Name','Email','','','',''], //Column Names
    //The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
    colModel :[
        {name:'x_object_id',index:'x_object_id', align:"center", sorttype:"text"},    
       {name:'x_priority',index:'x_priority',  align:"center", sorttype:"text"},
     {name:'x_site_id',index:'x_site_id',  align:"center",sorttype:"text"},
     {name:'x_site_name',index:'x_site_name',  align:"left",sorttype:"text"},
     {name:'x_status',index:'x_status',  align:"center", sorttype:"text"},
     {name:'x_title',index:'x_title',  align:"left", sorttype:"text"},
        {name:'x_creation_dt',index:'x_creation_dt', align:"center", formatter:'date', formatoptions:{srcformat: 'm/d/Y H:i:s',newformat: '<cfoutput>#session.myGridDateFormat#</cfoutput>'}}, // m/d/Y H:i:s
      {name:'x_creation_sort_dt',index:'x_creation_sort_dt', align:"center", hidden: true},
     {name:'x_cust_ref_no',index:'x_cust_ref_no', search:true, sorttype:"text"},
     {name:'name',index:'name', search:true, sorttype:"text"},
     {name:'e_mail',index:'e_mail', search:true, sorttype:"text", formatter:'email'},
     {name:'objid',index:'objid', hidden:true, search:false},
     {name:'x_object_objid',index:'x_object_objid', hidden:true, search:false},
     {name:'x_parent_objid',index:'x_parent_objid', hidden:true, search:false},
     {name:'x_parent_type',index:'x_parent_type', hidden:true, search:false}
    ],
    afterInsertRow : function(rowid,rowdata,rowelem) {
    $("#"+rowid+" td:eq(1)").css("color", "005D8C").css("text-decoration","underline").css("cursor","pointer");  // change col 1 to note it's a link
    $("#"+rowid+" td:eq(3)").css("color", "00748C").css("text-decoration","underline").css("cursor","pointer");  // change col 3 to note it's a link
    if (rowdata.x_parent_type == "children" && rowdata.x_parent_objid == 0)
     {
        $("#"+rowid+" td:eq(0)").empty().unbind("click").css("border-style","none");
         } 
      else
      {
        $("#"+rowid+" td:eq(0)").css("border-style","none");     
      } 
     },
    autowidth: true,
    onCellSelect: function(rowid,iCol,cellcontent){
      //alert (rowid,iCol,cellcontent);
       if (iCol == 1)
       {window.location.href = "case-details.cfm?cid="+cellcontent;}
     if (iCol == 3)
       {window.location.href = "site-config.cfm?DoThis=L&sid="+cellcontent;}
    },
    onSortCol : function (colname, colindex) {
     if(colname == "x_creation_dt") {
      $("#slist").setGridParam({sortname:"x_creation_sort_dt"});
      //no need to use triger reloadgrid
      }
     },
    cellEdit: false,
    pager: $('#pager'), //,#pager2 The div we have specified, tells jqGrid where to put the pager
    rowNum: <cfoutput>#session.maxlines#</cfoutput>, //Number of records we want to show per page
    sortorder: "", //Default sort order - desc
    recreateFilter : true,
    sortname: "x_priority", //Default sort column
    viewrecords: true, //Shows the nice message on the pager
    caption: 'Open Cases', //Grid Name
    height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
    mtype:'GET',
    postdata: "",  // my account
    toolbar:[false,"top"],//Shows the toolbar at the top. I will decide if I need to put anything in there later.
    //Things to do when grid is finished loading
                gridComplete:function(){
            //  Adjust grid to fill the screen, var gw used below see ******
            var gw = parseInt($("#slist").getGridParam("width"));
      // Hide the site name column per user settings
      var hidesite = <cfoutput>#session.myGridOC_Site_Name#</cfoutput>;
      if(hidesite == 0){
      $("#slist").hideCol("x_site_name");
      }
      // Show the Account Name column per user settings
      var hideacctname = <cfoutput>#session.myGridOC_Acct_Name#</cfoutput>;
      if(hideacctname == 0){
      $("#slist").hideCol("name");
       }
      // Show the Account Email column per user settings
      var hideacctemail = <cfoutput>#session.myGridOC_Acct_Email#</cfoutput>;
      if(hideacctemail == 0){
       $("#slist").hideCol("e_mail");
       }
      // Show the x_cust_ref_no  column per user settings
      var hiderefno = <cfoutput>#session.myGridOC_Cust_Ref_No#</cfoutput>;
      if(hiderefno == 0){
      $("#slist").hideCol("x_cust_ref_no");
       }
      // **** 
      $("#slist").setGridWidth(gw-0.01,true);   // reset the grid width            
           //We get the Userdata for the grid.
                        var recorddata = $("#slist").getUserData();
                        //If the msg type is error, we do some CSS and change text color to red, otherwise its blue
                        if(recorddata.TYPE == "Error"){
                            $("#t_slist").css("color","red")
                        }else{
                            $("#t_slist").css("color","blue")
                        }
                        //Display the message in the toolbar
                        $("#t_slist").html(recorddata.MSG)
      },
    subGrid: true, // make it a subgrid
          subGridRowExpanded: function(subgrid_id, row_id) {
      // we pass two parameters
       // subgrid_id is a id of the div tag created within a table
       // the row_id is the id of the row
    // If we want to pass additional parameters to the url we can use
    // the method getRowData(row_id) - which returns associative array in type name-value
       // here we can easy construct the following
         var subgrid_table_id;
      
       var rowdata = jQuery("#slist").getRowData(row_id);

       subgrid_table_id = subgrid_id+"_t";
          jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
          jQuery("#"+subgrid_table_id).jqGrid({
            url:"Users.cfc?method=GetSubCases&q=2&id="+row_id+"&x_object_id="+rowdata.x_object_id,
              datatype: "json",
                 colNames: ['ID','Site Name','Create D/T','Category','Priority','Status','Part Number','Part Desc','Description',''],
              colModel: [
              {name:"x_object_id",index:"x_object_id",key:true, align: "center", width:65, resizable:false
     , formatter:'showlink', formatoptions:{baseLinkUrl: 'prdetails.cfm',showAction:''}
     },
     {name:"x_site_name",index:"x_site_name",align:"left", width:80, hidden:false, resizable:false},
              {name:"x_creation_dt",index:"x_creation_dt", align:"left",formatter:'date', formatoptions:{srcformat: 'd/m/Y H:i:s',newformat: '<cfoutput>#session.myGridDateFormat#</cfoutput>'}, width:90, resizable:false},
              {name:"x_category",index:"x_category",align:"left", width:80, hidden:false, resizable:false},
                 {name:"x_priority",index:"x_priority",align:"left", width:80, resizable:false},          
              {name:"x_current_state",index:"x_current_state",align:"left", width:85, resizable:false},
     {name:"x_part_number",index:"x_part_number",align:"left", width:60, resizable:false},
     {name:"x_part_description",index:"x_part_description",align:"left", width: 80,  resizable:false},
     {name:"x_title",index:"x_title",align:"left", width: 80, resizable:false},
     {name:'mytyp', hidden:true, resizable:false}
                        ],
       height: 'auto',
       width:1000,
       imgpath: 'themes/basic/images', //Image path for prev/next etc images
       cellEdit: false,
      
       // change which fields to show
       afterInsertRow : function(rowid,rowdata,rowelem) {
        if (rowdata.mytyp == "PR")
     {
       $("#"+subgrid_table_id).hideCol("x_priority");
       $("#"+subgrid_table_id).setLabel("x_object_id","PR No.");
        }
     else
     {
     $("#"+subgrid_table_id).hideCol("x_part_number");
     $("#"+subgrid_table_id).hideCol("x_part_description");
     $("#"+subgrid_table_id).setLabel("x_object_id","SubCase No.");
     } 
     },
           //Things to do when grid is finished loading
               loadComplete:function(){
      // Hide the site name column per user settings
      var hidesubsite = <cfoutput>#session.myGridSC_Site_Name#</cfoutput>;
      if(hidesubsite == 1){
      $("#"+subgrid_table_id).hideCol("x_site_name");
                      }   
      },
      
             rowNum: 10,
             //imgpath: 'themes/green/images', //Image path for prev/next etc images,
             sortname: 'num',
         //The JSON reader. This defines what the JSON data returned from the CFC should look like
     jsonReader: {
     root: "ROWS",
     page: "PAGE",
     total: "TOTAL",
     records:"RECORDS",
     cell: "",
     id: "0",
     subgrid: {root: "ROWS", repeatitems: true, cell: "",id:"0"}
     },
             sortorder: "asc"
           })
       },
    // main grid code below
    //The JSON reader. This defines what the JSON data returned from the CFC should look like
    jsonReader: {
     root: "ROWS",
     page: "PAGE",
     total: "TOTAL",
     records:"RECORDS",
     userdata: "USERDATA",
     cell: "",
     id: "0",
     subgrid: {root: "ROWS", repeatitems: true, cell: "",id:"0"}
     }
    }
   );   
    $.extend($.jgrid.search,
    {caption:"Filter",
       Find:'Search',
       width:'400',
       checkInput:true,
       top:200,
       left:400,
       sopt: ['eq','ne','lt','le','gt','ge','bw','cn']     
      });
     
   $("#slist").navGrid("#pager",{edit:false,add:false,del:false,searchtext:"Filter"}),