horizontal scroll in iggrid

Hello,

We are using igGrid like a core component and using it in several other components. In our component we have an option to show/hide colum by using “columchooser” option.We are facing an issue with width of colum and horizontal scrollbar

if we set Grid width to “100%”  & “defaultColumnWidth” for example to “140px” and initially we have only 3 colums then table colums getting shrinked(not occupying entire grid width) or last colum occupying entire remaining width. Can refer below screenshots.

gridOptions = {

autoGenerateColumns: false,

defaultColumnWidth: ‘140px’, or ‘ * ‘

width: ‘100%’,

}

if we give “defaultColumnWidth” in pixels then if we choose more colums from “columchooser” horizontal scrollbar disappears. Can see in below screenshot.

gridOptions = {

autoGenerateColumns: false,

defaultColumnWidth: ‘40%’,

width: ‘100%’,

}

How to adjust width initially and with colum chooser with horizontal scrollbar?

Hello Ravi,

Thank you for posting in our community.

igGrid provides autofitLastColumn option. If set to true (as it is by default) and all column widths are specified (as it is when the defaultColumnWidth is set) and their combined width is less than the grid width then the last column width will be automatically adjusted to fill the remaining empty space of the grid.

This means that for your first scenario, if you have 3 column with defaultColumnWidth set to "140px" and grid width set to "100%" and the total grid width is more that 3*140 = 420 px the last column width will be expanded so that it fulfils the empty space.

In case that the default width is set to  "*" , which means that columns will be auto-sized based on the content of the column cells(including header) the grid will also auto-fit the last column.
What I believe might work for your scenario is omit setting grid`s width and column width. In this case the grid will calculate these automatically.

Attached you will find a small sample. It has 5 column, initially 3 are visible. Initially the grid width is equally divided between the tree columns, once an additional column is displayed the grid is recalculating the column widths.
Please test this sample on your side and let me know if you have any additional questions regarding this matter.

1385.igGridHScroll.zip