JQGrid - header and column not align

Question

Hope someone could point me to right direction..

I'm facing this problem for quite sometimes.!

https://i.sstatic.net/O7VWh.jpg

I try some of the solutions which I found from stackoverflow

e.g.jqGrid column not aligned with column headers

& other sources but none solved my problem. This problem only arise after upgrading to Chrome 19 and above (I think!) and safari 6. I noticed theres no problem when viewed in my 2nd computer which is using safari 5 and when I reinstall Chrome ver 18.

I try updating some of the js and css file by downloading from trirand.net but come to no solution.

Currently I'm running Safari Version 6.0.1 (8536.26.14) and Chrome Version 26.0.1410.43.

thanks

UPDATE 2: after updating to 4.4.5 image https://i.sstatic.net/Pcqlq.jpg & I forgot to mention this only happen when I integrate inside lightbox(facebox)

UPDATE 3: @Oleg I just realise after after updating to 4.4.5 or just paste ur code (inside comment) I'm not able to use my custom button anymore (working b4).. nothing happen.

I'm using a javascript & a php jqgrid, below is my code:

<div align="center" id="grido"> </div>  
<script type="text/javascript">
 //var lastSel;
$(document).ready(function(){ 
//  $('#grido').load('form/housekeeping/dun_grid.php');
});
</script>

<script type="text/javascript">
<!-- dun_grid.js  --> 

jQuery(document).ready(function(){

  var lastSel;

 jQuery("#dun_grid").jqGrid({
  url:'form/housekeeping/dun_griddata.php',
  datatype: "json",
  colNames:['DUN ID','DUN Code', 'DUN Name'],    
  colModel:[
      {name:'int_dunid',index:'int_dunid', hidden:true, align:"center", width:50},
      {name:'txt_dcode',index:'txt_dcode', editable:true, align:"center", width:150},
      {name:'txt_dname',index:'txt_dname', editable:true, align:"center", width:150},

          ],
  pager: '#pagerdun', //pagination enable
  rowNum:15,
  rowList:[10,20,30],
  width:430,
  height:'auto',
  sortname: 'txt_dcode',
  sortorder: 'asc',
  hidegrid: false,  //show/hide  grid button on caption header

  viewrecords: true, //display the number of total records
  editurl:"form/housekeeping/dun.php?mode=edit",
  loadtext: "Loading Data, Please Wait...",
  rownumbers:true, // add row numbers on left side
  caption: '&nbsp; DUN List',


 ondblClickRow: function(id){
     if(id && id!==lastSel){ 
       jQuery('#dun_grid').restoreRow(lastSel); 
       lastSel=id; 
    } 
    jQuery('#dun_grid').editRow(id, true, "", refreshing); 
 },

  onSelectRow: function(id){ 
    if(id && id!==lastSel){ 
       jQuery('#dun_grid').restoreRow(lastSel); 
       lastSel=id; 
    }  
 },  


}); /* end of jqgrid */


    jQuery("#dun_grid").jqGrid('navGrid','#pagerdun',{edit:false, add:false, view:false, del:true, search:true}, 
      {}, // edit
      {}, // add
      {url: 'form/housekeeping/dun.php?mode=delete'},  // delete
      {multipleSearch : true},
      {closeOnEscape:true} 
      );  //end on navgrid

    jQuery("#dun_grid").jqGrid('navButtonAdd','#pagerdun',{caption:"", buttonicon :'ui-icon-plus', 

        onClickButton:function(id){
          jQuery('#dun_grid').restoreRow(lastSel);

              var datarow = {txt_dname:""};
              jQuery("#dun_grid").addRowData("0",datarow,"first");
              jQuery('#dun_grid').editRow("0", true, "", tiesto);
              lastSel=id;
          },//end of onClickButton
        title:"New Record", 
        position:"last"
        }); //end of custom button


function refreshing(id){ /* refresh grid */
    jQuery('#dun_grid').trigger("reloadGrid");
    $.blockUI({ message:"Saving Data!!"}); 
        setTimeout($.unblockUI, 700); 
    } 

function tiesto(){
    jQuery('#dun_grid').restoreRow(lastSel);
   jQuery('#dun_grid').trigger("reloadGrid");
    $.blockUI({ message:"New Data Saved!!"}); 
        setTimeout($.unblockUI, 700); 
    } 


});  /*end of document ready*/
</script>


<div align="center" class="gridpanel" >   
<!--------------------------- ## grid for add/edit ## ------------------------------------------>
   <table id="dun_grid" class="scroll" cellpadding="0" cellspacing="0"></table>
  <!-- pager definition -->
  <div id="pagerdun" class="scroll" style="text-align:center;"></div>

 </div> <!----------------------- grid panel end -------------------------------------->

PHP

<?php 
 ini_set("display_errors","1"); 
require_once('../../Connections/jq-config.php');

// include the jqGrid Class 
require_once  "../../phpgrid/php/jqGrid.php";
// include the driver class
require_once "../../phpgrid/php/jqGridPdo.php";
// Connection to the server 
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); 
 // Tell the db that we use utf-8 
$conn->query("SET NAMES utf8"); 

// Create the jqGrid instance 
$grid = new jqGridRender($conn); 
$grid->SelectCommand = 'SELECT int_bankid, txt_bank_code , txt_bank_name, txt_bank_address FROM tbl_bank'; 

// set the ouput format to json 
$grid->dataType = 'json'; 
$grid->table ="tbl_bank"; 
$grid->setPrimaryKeyId("int_bankid"); 

$grid->setColModel(); 
$grid->setUrl('form/housekeeping/bank_grid.php'); 
$grid->setGridOptions(array("editurl"=>"form/housekeeping/bank.php?mode=edit"));


// Set grid option
$grid->setGridOptions(array( 
    "caption"=>"&nbsp; List of Banks", 
    "rownumbers"=>true,
    "rowNum"=>10, 
    "rowList"=>array(10,20,50), 
    "sortname"=>"txt_bank_code", 
    "hoverrows"=>true,
    "hidegrid"=>false, 
    "height"=>'auto', 
    "width"=>460, 
        "sortorder"=>'desc', 
    "loadtext" => "meloading data...",
    "cmTemplate"=>array("searchoptions"=>array("sopt"=>array('eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc')))
    )); 

// Change some property of the field(s) 
$grid->setColProperty("int_bankid", array("label"=>"ID", "width"=>50, "align"=>"center", "hidden"=>true)); 
$grid->setColProperty("txt_bank_code", array("label"=>"Code", "width"=>60, "align"=>"center", "editrules"=>array("required"=>true))); 
$grid->setColProperty("txt_bank_name", array("label"=>"Name", "width"=>130, "align"=>"center", "editrules"=>array("required"=>true))); 
$grid->setColProperty("txt_bank_address", array("label"=>"Address", "width"=>200, "align"=>"center")); 

// enable navbutton 
$grid->navigator = true; 

    $grid->setNavOptions('navigator', array("pdf"=>false,"excel"=>false,"add"=>false,"edit"=>false,"del"=>true,"view"=>false )); 
    $grid->setNavOptions('del',array("url"=>"form/housekeeping/bank.php?mode=delete")); 

// jscript for adding new row       
 $reloading = <<<RELOAD
 function(id)
  {
     jQuery("#grid").trigger('reloadGrid');
  }
RELOAD;

 $mycode = <<<NEWBUTTON
 function(id)
  {
    jQuery("#grid").jqGrid('restoreRow',lastSel);
    jQuery("#grid").jqGrid('addRowData',"0",{txt_bank_code:''},"first");
    jQuery("#grid").jqGrid('editRow', "0", true,'',$reloading); 
    lastSel=id;
  }
NEWBUTTON;

//jscript for inline editing    
$editrow = <<<DOUBLECLICK
  function(rowid)
  {
      if (rowid && rowid !== lastSel) {
          jQuery("#grid").jqGrid('restoreRow', lastSel); 
          lastSel = rowid; 
      } 
         jQuery("#grid").jqGrid('editRow', rowid, true,'',$reloading); 
  }
DOUBLECLICK;

//custom button setting for adding new row
$buttonoptions = array("#pager", array("caption"=>"", 'buttonicon' =>'ui-icon-circle-plus', "onClickButton"=> "js:".$mycode));

// inserting custom button
$grid->setGridEvent('ondblClickRow', $editrow);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$grid->renderGrid('#grid','#pager',true, null, null, true,true); 
$conn = null; 


?>  

Answer 1

My Case

1. jqgrid version 4.6.0

2. Group Headers in the grid

3. shrinkTofit did not work

4. I called the following function in gridComplete event

   function alignColumnsWithHeadersGENEL(gridName) {

    var objHeaders = $("table[aria-labelledby=gbox_" + gridName + "] tr[class=jqg-first-row-header] th");
    var objColumns = $("table[id=" + gridName + "] tr[class=jqgfirstrow] td");
    for (var i = 0; i < objHeaders.length; i++) {
        objHeaders[i].style.width = objColumns[i].style.width;
    }
   

   }

5. The structure of the HTML produced for my grid was something like the following(deleting the unnecessary fillings)

6. Somehow there were disrepancies between widths of the headers and columns

Answer 2

Add this code into the gridComplete event of your grid. Don't forget to replace the gridName with your grid id:

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
   var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
   var width= col.outerWidth();
   $(objHeader[i]).css("width", width);
}

Works with v.4.6.0.

Answer 3

I had this same problem and was able to fix it by adjusting the CSS. I had set padding on the th which caused the issue.

It's possible that your th is inheriting padding which is messing up the alignment.

If the padding on the th is different than the grid cells (especially padding-left and right) it will break the alignment.

Answer 4

Try setting the property shrinkToFit as true;

shrinkToFit : true,

As given in the wiki

This option, if set, defines how the the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid. If this value is true, and the width of the columns is also set, then every column is scaled in proportion to its width. For example, if we define two columns with widths 80 and 120 pixels, but want the grid to have a width of 300 pixels, then the columns will stretch to fit the entire grid, and the extra width assigned to them will depend on the width of the columns themselves and the extra width available.