Am I missing a property or method for this?
If I place a grid with a few columns on my page, then resize the web page. I will end up with the horizontal scroll bar on the grid and the columns will not properly resize on their own.
I have 2 columns with fixed width during initialization and three columns that will fill the rest of the grid width. I have the grid width and height to 100% and not a fixed value as well.
I have used the following for now until someone can please help with this issue.
$(window).resize(function () {
$('table').css("width", "100%");
$("#SOD_gridServiceList_hscroller_container").css("height", "0");
});
The table selector will grab the inner table on the grid and resize it back to 100% instead of a fixed width and the height must be changed on the hscroller_container of the grid to 0 to keep if from appearing. You can't change it to display:none or it will just keep reappearing.
Thanks in advance.
Michael
This is 2012.2.
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?
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 () {
$("#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" }
]
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.
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); } }
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.