title: Can't get JQgrid 4.5.2 frozen columns to work properly -- only headers are moving
body: <p>I already tried to fix it myself by reading some other questions like this one => <a href="https://stackoverflow.com/questions/8564198/why-doesnt-jqgrid-frozen-column-seem-to-work-with-filter-rows-and-filter-headin/8620574#8620574">why doesn&#39;t Jqgrid frozen column seem to work with filter rows and filter heading?</a></p>
  
  <p>but i gues the grid has changed since then because i am not able to call the complete method (or i'm doing something wrong).</p>
  
  <p>So right now only a copy of the headers are moving and not the data, the height of the headers isn't correct neither but i presume that's because i rotate the headers and adjust the height afterwards in javascript. It is pretty out of the box except for rotating the headers but without it its not working neither :(</p>
  
  <p>I made a clean code example so helping will be a bit easier, in my situation i also use some custom code to rotate my headers but even without it the frozen columns are not working.</p>
  
  <p>any help will be much appreciated :)</p>
  
  <p>The Html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Jqgridtest&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="styles/jquery-ui/jquery-ui-1.10.3.custom.css" /&gt;
      &lt;link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" type="text/css" /&gt;  
       &lt;link rel="stylesheet" href="styles/demo.css" type="text/css" /&gt;  
      &lt;script type="text/javascript" src="scripts/jquery-1.9.0.min.js"&gt;&lt;/script&gt;   
      &lt;script src="jqgrid/js/i18n/grid.locale-nl.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/generatedata.js"&gt;&lt;/script&gt;    
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;table id="jqgrid"&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The generatedata javascript with correct dataloading + fixed headers</p>
  
  <pre><code>$(document).ready(function() {
      processDataToGrid('#jqgrid') ;
  });
  
  
  function getInternetExplorerVersion()
  // Returns the version of Windows Internet Explorer or a -1
  // (indicating the use of another browser).
  {
      var rv = -1; // Return value assumes failure.
      if (navigator.appName == 'Microsoft Internet Explorer') {
          var ua = navigator.userAgent;
          var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
          if (re.exec(ua) != null)
              rv = parseFloat(RegExp.$1);
      }
      return rv;
  }
  
  var fixPositionsOfFrozenDivs = function () {
      var $rows;
      if (typeof this.grid.fbDiv !== "undefined") {
          $rows = $('&gt;div&gt;table.ui-jqgrid-btable&gt;tbody&gt;tr', this.grid.bDiv);
          $('&gt;table.ui-jqgrid-btable&gt;tbody&gt;tr', this.grid.fbDiv).each(function (i) {
              var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
              if ($(this).hasClass("jqgrow")) {
                  $(this).height(rowHight);
                  rowHightFrozen = $(this).height();
                  if (rowHight !== rowHightFrozen) {
                      $(this).height(rowHight + (rowHight - rowHightFrozen));
                  }
              }
          });
          $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
          $(this.grid.fbDiv).css($(this.grid.bDiv).position());
      }
      if (typeof this.grid.fhDiv !== "undefined") {
          $rows = $('&gt;div&gt;table.ui-jqgrid-htable&gt;thead&gt;tr', this.grid.hDiv);
          $('&gt;table.ui-jqgrid-htable&gt;thead&gt;tr', this.grid.fhDiv).each(function (i) {
              var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
              $(this).height(rowHight);
              rowHightFrozen = $(this).height();
              if (rowHight !== rowHightFrozen) {
                  $(this).height(rowHight + (rowHight - rowHightFrozen));
              }
          });
          $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
          $(this.grid.fhDiv).css($(this.grid.hDiv).position());
      }
  };
  
  
  
  function processDataToGrid(gridId) {
  
      var data = [ 
      {id:1, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:2, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:3, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : false, x15:true  } ,
      {id:4, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:5, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: true, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:6, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:false, x13: false, x14 : false, x15:true  } ,
      {id:7, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:8, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:9, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:10, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:11, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:12, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: true, x14 : false, x15:true  } ,
      {id:13, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:14, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:15, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true  } ,
      {id:16, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
      {id:17, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:18, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:19, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:20, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:21, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:22, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true  } ,
      {id:23, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
      {id:24, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:25, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:26, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:27, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:28, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:29, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
      {id:30, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:31, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:32, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:33, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:34, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:35, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:36, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:37, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:38, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:39, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:40, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : true, x15:true  } ,
      {id:41, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
      {id:42, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
      ];
  
  
  
      $(gridId).jqGrid({
          datatype: "local",
          gridview: true,
          forcefit: false,
          data:data,
          shrinkToFit: false,
          width: 780,
          height: 400,
          rowNum: 100,
          columnsheight: 150,
          colNames: ['Fixed1', 'Fixed2' ,'Col1', 'Col2', 'Col3' ,  'Col4', 'Col5','Col6', 'col7', 'Col8', 'Col9', 'Col10',  'Col11',  'Col12', 'Col13', 'Col4', 'Col15'  ],
          ignoreCase: true,
          colModel: [
          { name: 'fixed1', sorttype: 'text', search:true, width:300, align: 'left', frozen : true ,sortable:false },
          { name: 'fixed2', sorttype: 'text', search: true, width: 130, align: 'left', frozen: true, sortable: false },
          { name: 'x1', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x2', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x3', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x4', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x5', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x6', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x7', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x8', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x9', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x10', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x11', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x12', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x13', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x14', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
          { name: 'x15', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
  
  
          ]
      });
  
  
  
      //enable group headers
      $(gridId).jqGrid('setGroupHeaders', {
          groupHeaders: [
      { startColumnName: 'x1', numberOfColumns: 10, titleText: 'TopHeader1' },
      { startColumnName: 'x10', numberOfColumns: 3, titleText: 'TopHeader2' },
      { startColumnName: 'x13', numberOfColumns: 1, titleText: 'TopHeader3' }
    ]
      });
  
      $(gridId).jqGrid('setGroupHeaders', {
  
          groupHeaders: [
      { startColumnName: 'x1', numberOfColumns: 7, titleText: 'SubHeader1' },
      { startColumnName: 'x8', numberOfColumns: 2, titleText: '' },
      { startColumnName: 'x10', numberOfColumns: 6, titleText: 'Subheader2' },
    ]
      });
  
      $(gridId).jqGrid('setFrozenColumns');
  
  
     RotateColumnHeaders($(gridId), 150, 100);
      //enable search and contains searchmethod
      $(gridId).jqGrid('filterToolbar', { searchOnEnter: false, defaultSearch: 'cn' });
          $(gridId).triggerHandler("jqGridAfterGridComplete");
      fixPositionsOfFrozenDivs.call($(gridId)[0]);
  }
  
  
  // Rotates the (x1-x24) columnheaders  90 degrees
  var RotateColumnHeaders = function (grid, headerHeight, headerWidth) {
      var trHead = $("thead:first tr")[3];
      var cm = grid.getGridParam("colModel");
  
      $("th", trHead).height(headerHeight);
  
      for (var iCol = 0; iCol &lt; cm.length; iCol++) {
          var cmi = cm[iCol];
          //check if name starts with x because our modelnames that should be rotated start with x as well    
          if (cmi.name.match("^x")) {
              var headDiv = $("th:eq(" + iCol + ") div", trHead);
              headDiv.addClass("VerticalHeader");
              headDiv.css("overflow", "initial");
              var ieVersion = getInternetExplorerVersion();
              if (ieVersion != -1 &amp;&amp; ieVersion &lt;= 9) {
                  headDiv.addClass("VerticalHeaderIE");
                  //set height to prevent text clipping
                  headDiv.height(23);
                  //set background color of parent since background color of child element has been set so the text is readable
                  //and the parent color is different = very ugly so set parent color 
                  headDiv.parent().css("background", "#EDEDED");
              }
          }
      }
  
  };
  
  
  function boolFormatter(cellvalue, options, rowObject) {
  
              if (cellvalue == "*") {
                  return '&lt;span class="BoolCell Talks"&gt;*&lt;/span&gt;'; /* null*/
              }
              else if (cellvalue) {
                  return '&lt;span class="BoolCell Allowed"&gt;&amp;#x25CF;&lt;/span&gt;'; /* true */
              }
              else {
                  return '&lt;span class="BoolCell NotAllowed"&gt;-&lt;/span&gt;'; /* false */
              }
  
      return new_format_value
  }
  </code></pre>
  
  <p>my custom css to rotate the headers</p>
  
  <pre><code>.VerticalHeader
  {
      -webkit-transform: rotate(90deg); 
      -moz-transform: rotate(90deg);  
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
      margin-top:-40px;
      position: relative;
      font-size: 0.8em;
  
  }
  
  .VerticalHeaderIE  /* _EXTRA_ style voor VerticalHeader in IE */
  {
      text-align:left;
      width:150px;
      height:50px;
      margin-top:-40px;
      margin-left: 20px;
      background-color: #EDEDED;
  
      zoom: 1;
  }
  </code></pre>