Dynamic column minimum width

[ksoerens]

I need the grid to be able to adjust its columns to their minimum width. What I mean is, each column must have a width, which is at least as wide as the title or the content - depending on which one is widest. Neither the title, nor the content must break the line if spaces occur.

If I resize the window, so it gets smaller than the grid, the grid must still keep its minimum size, but then it can be scrolled by a horizontal scroll bar which will be visible in this case.

If I resize the window, so it gets BIGGER than the grid, the grid must increase each column width, like when the Fluid Laout is used.

Basically most of the functionality is already provided by the Fluid Layout. But is there any way to achieve what I want?

Thanks in advance for your reply! 

 

[paramvir]

The grid width ( option.width ) can be described in px, %, %+-px and auto, so if you keep width in % and auto, grid changes its size as the window is resized. It's to be noted that % and auto are calculated based upon the grid immediate parent element's width.

grid also has an option minWidth so that the grid can't be shrunk beyond a certain minimum width.

If you want the columns to grow and shrink as the grid is resized due to window resize, then specify column widths in % ( column.width )

Setting the column widths equal to the content width without text wrap is not supported currently.

[ksoerens]

Thanks for the reply.

So I had to solve it the hard way by running through the cells for each column and measuring the text size, including the title, and after that setting the minWidth to the largest size found.

The code is attached to events like Create and CellSave. And I also run the code when one or more rows are deleted manually. So now the horizontal scroll bar appears before the text gets wrapped when resizing the window.

[paramvir]

change event is an universal event whenever there is any change of data after initial load of data, so it could be a better fit for your case.

Horizontal scroll bar in the grid can be avoided with flexWidth: true if you don't want the horizontal scrollbar in grid.