Dynamic Column widths

[ralph1996]

We are trying to create a grid with a fixed width (actually the width is tied to the width of the window and we adjust the grid size when the window size adjusts).  We are using virtualX - false and horizontal scrolling.

Things are fine as long as the total column widths exceed the width of the grid.  When the total is less there is a gap between the rightmost column and the scrollbar on the right.  In theory one possible solution would be to use the lastColumn 'auto' setting even though that is not the best solution.  This however will not work for us as I have seen in the forum that this only works with virtualX = true.

Since it does not appear that you have any options for auto sizing the columns to fit the grid (unless we use percentages on everything which we cannot do) we would endeavor to attempt to update certain column widths in the colModel on the fly when the grid is resized.  The question is, do you have any examples of doing this or advice on the best way to approach this?  We are already catching the window resize event and resizing the grid itself.  Can we simply pull all the column widths from the grid and and adjust the colModel and refresh the grid?  Or is there a more efficient event driven method.  Also is there a way to get the "current" column width of each column since they may have been changed since the grid was created.
Thank you....

[paramvir]

Have you checked scrollModel: { autoFit: true }

Example: http://paramquery.com/pro/demos/grid_json

[ralph1996]

That won't work.  We do not want the columns resized to fit when the sum of the column widths is greater than the width of the grid - we want a scroll bar.  However I realized a couple of other things I can try but not sure if they will work.

1. On resize event if I can determine that the width of the columns is less than the width of the grid/container change the scrollModel to autofit:true and refresh.  Then change it back if the container is resized to be smaller than the width of the columns.  I am not sure if changing the scrollMoel on the fly will work?

2. Use width: 'flex' on the grid and ScrollModel: auto: 'true' and initially create the grid width to be the sum of all the columns.  This could create the grid wider than the container - so we would need to add the overflow-x on the container to allow scrolling.  My understanding is that once the grid is created, any resizing of the grid will propotionally scale the column widths which is fine.

I will experiment with these.