Hi Infragistics,
I'm using the igGrid component with JQuery and HTML, I supply the datasource using a javascript array.
I supply the Columns with width percentages and I supply column hiding information. The hidden columns are remembered in a cookie and supplied to the grid using the column hiding feature.
When I have some hidden columns, I find that Infragistics is increasing the percentage of the Last column to make the total of all column equals to 100%. This means that my last column becomes dis-proportionately bigger than all the other columns... I have no control over this...
I can think of 2 potential solution approaches but they would require updates from Infragistics:
1) Allow the Last Column percentage re-sizing to be disabled. (Browsers have the smarts to automatically figure out column widths)
2) Instead of Infragistics re-sizing just the last column, it could re-size all visible columns proportionally.
-Clive
Hello Alex,
Thank you for posting in our community.
I have created a sample regarding your query. Three grids are included in it as follows: grid1 contains only one hidden column, grid2 contains two hidden columns and grid3 correspondingly contains three hidden columns. I have not set manually column sizes and in each of the three cases columns have proportional widths.
Feel free to modify the sample if needed. Please let me know if this helps. If the undesired behavior persists any code snippets or samples would be appreciated in order to test further this scenario.
Hi Dimka,
Thank you for your reply. I have modified the sample to demonstrate the issue I'm having. I've added the width percentages for each column and turned on the column hiding feature to demonstrate the behavior we're experiencing.
I have attached the modified sample.
Could you please check if setting the grid option "autofitLastColumn" to false resolves the issue you are experiencing? It is enabled by default and will try to extend the last column to get a sum of 100% from all columns.
Best regards,
Stamen Stoychev
I have investigated your issue, and I have asked our engineering staff to examine this further. To ensure that it will receive attention, I have logged this behavior in our internal tracking system. The next step will be our developers to review it and confirm the issue or to offer a fix, or other resolution.
I will contact you through a ticket that is created regarding this issue. You may find it at: http://infragistics.com/ -> Account -> Support Activity
I have applied this workaround to our application and it has worked with no visible impact on performance.
Hi Alex,
I can say that this is a bug. As our colleague Stamen proposed autoFitLastColumn should be set to false. So I will propose some of our Development Support guys to log in a public bug. On the other hand I can propose you a workaround. Probably you have seen that if all columns are shown initially and you hide the last 3 columns from UI then the grid shows properly columns(2 cols with width 10%) and browser shows them in correct way. So you can attach to event rendered and to hide columns. Here it is just a sample code:
rendered: function (e, ui) { var hiding = ui.owner.element.data('igGridHiding'); if (hiding) { hiding.hideColumn('Distributor'); hiding.hideColumn('Quantity'); hiding.hideColumn('Price'); } },
Again this is just a workaround and sample code which demonstrates how the issue could be fixed.
I will attach the sample.
Thanks,
Miro Hristov
I tried this... It didn't play ball though. Is this an MVC option only or also available using HTML.
$("#grid1").igGrid({ columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "10%", hidden: false }, { headerText: "Product Name", key: "Name", dataType: "string", width: "30%", hidden: true }, { headerText: "Distributor", key: "Distributor", dataType: "string", width: "20%", hidden: false }, { headerText: "Quantity", key: "Quantity", dataType: "number", width: "30%", hidden: false }, { headerText: "Price", key: "Price", dataType: "number", width: "10%", hidden: false} ], width: '550px', height: '200px', dataSource: products, autoCommit: false, primaryKey:'ProductID', autofitLastColumn: false });