I'm using the igHierarchicalGrid. I'm creating it like this:
$grid.igHierarchicalGrid({ width: "100%", dataSource: data, dataSourceType: "json", responseDataKey: "Data", autoGenerateColumns: false, columns: colsArray, defaultColumnWidth: "*", autoGenerateLayouts: false, columnLayouts: layoutsArray, features: [ { name: "MultiColumnHeaders" }, { name: "Sorting", type: "local", mode: "multi", persist: true }, { name: "Filtering", type: "local", persist: true } ] });
I don't have width defined in any of the columns and I also have defaultColumnWidth: "*" in every layout. However the main grid (the most outer one) generates an horizontal scrollbar.
I've checked and the divs #grilla_table_container and #grilla_table_scroll are created ok but the table inside has width property set with 30 extra pixels. I think it has to do with the default value of expandColWidth. If I set that property with a value of 0, no scrollbar is shown but of course, the expand column dissapears.
How can I avoid the horizontal scrollbar?
Thanks!
Hello Hugo,
Thank you for contacting Infragistics.
The scrollbar appears because the autofitLastColumn option is set to true by default. This option overrides the default width of the last column.
Additionally when setting defaultColumnWidth to '*' if the columns exceed the 100% width you will again have a horizontal scrollbar since ‘*’ sets the width of the column to wrap its content.
I would suggest setting the defaultColumnWidth to:
100 devised by the visible columns count in pixels.
For example if you have 2 visible columns the defaultColumnWidth should be ‘50%’ (100 / 2). If 4 the defaultColumnWidth would be ‘25%’.
const visibleColumnsCount = colsArray.filter(c => c.hidden !== true).length; const defaultColumnWidth = (100 / visibleColumnsCount) + '%';
I have attached a sample representing how this would work having two columns in the parent grid.
In case you have additional questions feel free to ask them.
1346.WidthsHierarchicalGridSample.zip
Hello Martin.
Thank you for your reply but that's not what I need.
I wan't to have the expand column with a width of 30px (as it is by default), then every data column but the last one wrapped to its content width (as it works when I set defaultColumnWidth to '*') and finally, the last data column completing the grid's width without generating a scrollbar (as it should be using autofitLastColumn's default value).
I know that the possibility to avoid the horizontal scrollbar relays on the amount of columns and its content width, but in my case it is possible. I think what is happening is that autofitLastColumn is not considering the width of expand column. I've tried to set expandColWidth to 50 and the then the column was expanded 50 extra pixels instead of 30.
Thanks
Hello,
Thank you for getting back to us.
I managed to reproduce the behavior that you are describing. I created the following support case for you" CAS-200160-B5P2S1 and I will update you on my progress via this case. You could see it in your account on our web site in the Support Activity page once you log in with your credentials.
Please let me know if you need any further assistance.
Hello Vasya.
Thank you for taking care of the support case. Unfortunately, I've just download the new version, tested it and it did not solve my problem. The same thing is still happening. I'm using the version: 18.2.99.