Hello,
I found that IgGrid does not correctly create column size when the grid is contained within a JQueryUI tab element. I started with your igGrid example and created a JSFiddle to show the problem. For some reason it works on the first tab, but not on the second.
In my application/test code, it fails on the first tab as well.
http://jsfiddle.net/9xp7uw7m/
I believe this is related to this post :
http://es.infragistics.com/community/forums/p/91235/450789.aspx#450789
I created a support ticket, but thought this should be here for other developers to find.
Thank you.
Hello C J,
Thank you for posting in the community.
As stated in the mentioned forum post the grid is initialized before the tab and its width is being limited. What I can suggest as a workaround is handle the activarte event of the tab, to ensure it is being successfully activated. Since this event is fired when the tab is activated, in your scenario when you switch to the second tab, it could be used to set the width of the header and content table to match the grid from the first tab. For example:
$("#tabs").on("tabsactivate", function (event, ui) { var $igGridTables = $('.ui-iggrid-table.ui-widget-content'); var $igGridHeaderTables = $(".ui-iggrid-headertable"); var width = $igGridTables.first().width(); $igGridTables.width(width); $igGridHeaderTables.width(width); });
$("#tabs").on("tabsactivate", function (event, ui) {
var $igGridTables = $('.ui-iggrid-table.ui-widget-content');
var $igGridHeaderTables = $(".ui-iggrid-headertable");
var width = $igGridTables.first().width();
$igGridTables.width(width);
$igGridHeaderTables.width(width);
});
Your modified sample could be found at:
http://jsfiddle.net/9xp7uw7m/1/
I hope this helps you achieve your requirement,
Please let me know if you need any further assistance with this matter.
The problem is that in my app, I had the issue on the FIRST tab as well. And even if I didn't, the first tab in my app does NOT have a grid. The grid is on a different tab so there is no grid size to copy/use.
What else can I do?
Please do not hesitate to contact me if you need any further assistance with this matter.
What I can suggest as an alternative is again handling active event of the tab control. In this event you could initialize the grid and set its width according to your requirement.
For example:
$("#tabs").on("tabsactivate", function(event, ui) { // Here we initialize the corresponding grid the corresponding tab if ($(ui.newTab).attr("aria-controls") == "tabs-2") { initSecondGrid(); }; }); . . . function initSecondGrid () { // Here we make sure that the grid is not already initialized if ($('#grid-2_table_container').length > 0) { return; } $('#grid-2').igGrid({ primaryKey: "ProductID", autofitLastColumn: true, columns: [{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "100px" }, { headerText: "Product Name", key: "Name", dataType: "string", width: "100px" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string" }], width: "100%", features: [{ name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [{ columnKey: "ProductID", editorOptions: { type: "numeric", disabled: true } }] }] }); }
$("#tabs").on("tabsactivate", function(event, ui) {
// Here we initialize the corresponding grid the corresponding tab if ($(ui.newTab).attr("aria-controls") == "tabs-2") { initSecondGrid();
}; });
.
function initSecondGrid () { // Here we make sure that the grid is not already initialized if ($('#grid-2_table_container').length > 0) { return; }
$('#grid-2').igGrid({ primaryKey: "ProductID", autofitLastColumn: true, columns: [{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "100px" }, { headerText: "Product Name", key: "Name", dataType: "string", width: "100px" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string" }], width: "100%", features: [{ name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [{ columnKey: "ProductID", editorOptions: { type: "numeric", disabled: true } }] }] }); }
I am also attaching a small sample for your reference.