I encountered the same issue in the same situation : iggrid is in a fixed table with width and height set to 100%, resulting in the fixed header not resizing properly.

Another bug was not notified in the previous posts : the width of the fixed header will be incorrect if there is a vertical scroll bar (it doesn't take into account the width of the scroll bar and will take 100% width (instead of 100% width - vscroll.width), resulting in an offset of the columns of the header and the body)

Here my code to workaround this until there is a proper fix by Infragistics.

• version 2013.2
• browsers : IE 8-9-10-11, Chrome 33

Also, how can i know when this bug is fixed by your dev team ?

Workaround code : 

function igGridWorkaroundResize(iggrid) {   //Initialize
  iggrid.igGrid({
    rendered: function (evt, ui) {
      setTimeout(function() { // setTimeout needed for IE8, other browsers are fine
        resizeIgGridBody();
        resizeIgGridHeader();
      }, 100);
    }
  });

  /* Force igGrid resizing when windows resize */
  $(window).resize(function () {
    resizeIgGridBody();
    resizeIgGridHeader();
  });


  function resizeIgGridBody() {
    // resize whole body to 100%
    iggrid.css("width", "100%");
    // hide horizontal scroller because it shouldn't appear
    $("#grid_hscroller_container").css("height", 0);
  }


  function resizeIgGridHeader() {
    // resize whole header to body width (because 100% doesn't take 'vertical scroll bar width' into account)
    var width = iggrid.width();
    iggrid.parent().parent().find(".ui-iggrid-headertable").css("width", width);
  }
}

Hello Michael,

Thank you for the update. I have done some further looking into this matter appears to be an issue with the control. I have logged this in our internal system with the following id TFS# 141470. I am also making a case visible to you for future reference concerning this matter.

Sorry.  The browsers are IE10 and Chrome for sure.

Hello Mike,

Thank you for checking on this.  The service release: 12.2.20122.2113.

I am including an attachment of pictures.  There are 2 sets.  The first set is without the window resize code.  The second set is with the window resize code.  Picture 1 will represent opening the page initially.  The second picture will represent resizing the window smaller.  The third picture will represent resizing the window larger.

Set 2 was the result of adding javascript code for the window.resize event:

$(window).resize(

function () {      

        $('table').css("width", "100%");

        $("#grid_hscroller_container").css("height", "0");

    });

The following is the code for the grid:

$.ig.loader(function () {

$("#grid").igGrid({

dataSource: results["gridData"],

responseDataKey: "",

autoGenerateColumns: false,

dataSourceType: "json",

renderCheckboxes: true,

enableHoverStyles: true,

height: "100%",

width: "100%",

fixedHeaders: true,

primaryKey: "AccountID",

caption: "Account List",

columns: [

{ headerText: "AccountID", key: "AccountID", hidden: true },

{ headerText: "Account Number", key: "AccountNumber", dataType: "string" },

{ headerText: "Name", key: "Name", dataType: "string" },

{ headerText: "Owner", key: "CompanyBillingDisplay", dataType: "string" },

{ headerText: "Management", key: "ManagementDisplay", dataType: "string" },

{ headerText: "Mgmt?", key: "IsManagement", dataType: "bool", width: "100" },

{ headerText: "Category", key: "AccountCategoryDisplay", dataType: "string" },

{ headerText: "Type", key: "AccountTypeDisplay", dataType: "string" },

{ headerText: "Credit On Hold?", key: "CreditOnHold", dataType: "bool", width: "130"},

{ headerText: "Active?", key: "IsActive", dataType: "bool", width: "100" }

],

features: [

{ name: "Paging", type: "local", pageSize: 50, page: 1 },

{ name: 'Sorting', type: "local", mode:"multi" },

{ name: 'Selection', mode: 'row', multipleSelection: false, activation: true, rowSelectionChanging: gridSelectionChange },

{ name: 'Resizing', deferredResizing: false, allowDoubleClickResize: true },

{ name: 'Filtering', allowFiltering: true, caseSensitive: false, type: "local" }

]

});

});

Hello Michael,

Thank you for contacting Infragistics.

I have some follow up questions concerning this matter. What browser or browsers are you seeing this in? Do you set a default column width on the grid? Do you know what service release for v12.2 you are using?