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.stack.imgur.com/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.stack.imgur.com/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; 


?>

Not every jqGrid has problems which you describe. Screenshort can understand the problem which you have, but it couldn't help to find the reason of the problem. You should modify the text of your question and include JavaScript code which can be used to reproduce the problem. If you have some online demo it would be good to post the corresponding URL. It's important to use `jquery.jqGrid.src.js` instead of `jquery.jqGrid.min.js` in the demo to be able to debug the problem. — Oleg, Apr 03 '13 at 09:31
I updated the jquery.jqGrid.min.js... and the problm is minimise..but not totally solve...FYI @Oleg, I bought the php Suite in 2011 and I didnt renew my subscription, is it ok for me to just updates the files e.g. js with the new one?? right now, Im trying to compile what I have so far in a new folder to be shared here.. I wish I could let you into the system but to many things inside there and I am not allowed to do so.. will update ... — aznan, Apr 25 '13 at 03:57
Do you mean jqSuite? I don't use it myself, so I have no idea what you can do to upgrade it on the current version of jqGrid. I would just try to upgrade `jquery.jqGrid.src.js` and `jquery.jqGrid.min.js` to the version 4.4.5. If it will not help you can modify `jquery.jqGrid.src.js` like I described [here](http://stackoverflow.com/a/10621951/315935) and generate new `jquery.jqGrid.min.js` using [Microsoft Ajax Minifier](http://ajaxmin.codeplex.com/). — Oleg, Apr 25 '13 at 05:40
thnx @Oleg... yup jqSuite .. because I need to use some of the future fast at that moment .. I dunno how to export to excel and pdf + the chart.. anyway Ive updated the jquery.jqGrid.min.js and it look like this http://imgur.com/NlY786x. & about the modification, i cant find the "isSafari" etc. Is it fix and not there anymore in 4.4.5? or am I looking in the wrong place.. — aznan, Apr 25 '13 at 07:10

score 1 · Answer 1 · edited Dec 20 '13 at 17:28

1

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.

edited Dec 20 '13 at 17:28

user1618143

1,728
1
13
27

answered Dec 20 '13 at 16:59

Anthony_Z

725
1
9
22

the things is I have 2 places where i used jqgrid.. 1. on normal page... 2. on lightbox (facebox) which I see the problem... – aznan Mar 14 '14 at 01:14

score 0 · Answer 2 · answered Apr 03 '13 at 09:52

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.

I' compiling my code into a simpler version; I updated my js but other problem arise, like what i have mention above. — aznan, Apr 26 '13 at 01:25

score 0 · Answer 3 · edited Mar 12 '14 at 22:32

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.

score 0 · Answer 4 · answered Sep 01 '20 at 09:18

My Case

jqgrid version 4.6.0
Group Headers in the grid
shrinkTofit did not work

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;
 }

}

The structure of the HTML produced for my grid was something like the following(deleting the unnecessary fillings)
Somehow there were disrepancies between widths of the headers and columns

JQGrid - header and column not align

4 Answers4