[solved] GridPanel / Grid doesn't resize columns on window resize

[tarsolya]

Hi guys,

I have tried everything, still no luck. Browsed this forums but couldn't find an exact solution to this problem.

I have a GridPanel added to a NestedLayoutPanel in my main BorderLayout. That GridPanel has a Grid for browsing some products. Now, my problem is, when I resize the window, the columns doesn't get adjusted to the new Viewport width and a scrollbar pops up at the bottom of the grid. I have autoSizeColumns: true and monitorWindowResize: true, still no luck.





Basically, I want that scrollbar go away and my columns automatically resizing to the new region width after a window size change.

Thanks,
Andr

[Animal]

You'll have to hook a handler to the Region's "resized" event, and resize the GridPanel, and autoSize the Grid.

[tarsolya]

Thanks a lot, Animal. I'm gonna figure out, how to do that propely.

[humpdi]

hey!

would be nice if you let us know if you have found a solution!

thanks

[tarsolya]

Ok, I hit a wall.

I've hooked up on region's resized, but unfortunately that's only fires when a user using the in-layout split bars to resize a region (I guess).

I figured, that I need to listen on layout's 'layout', I did it with a Grid.autoSize(), but it didn't do anything.

I have a nested layout and in the nestedlayoutpanel, I have 2 regions, center / south. The problem is, that not the regions nor the panels in the region fire their respective resize / resized event, when a layout event is fired.

My questions are:

1.) Does the regions' and panel's events only fire when the user resized with their splitbars?
2.) If I can use the layout event on the inner layout of my nested, how do I resize the GridPanel in the center region automatically or does it resizes by itself (I guess it is)?
3.) My Grid resized when the layout changes. However, the columns are not. Can I somehow auto resize the columns based on the Grid's or GridPanel's new dimensions (auto size columns is turned on)?

[tarsolya]

Finally, I've done it after some source digging.

Using the 'layout' event, I've attached a callback what uses the GridView autoSizeColumns().

Like this

// Attaching the even handler
innerLayout.on('layout', this.fitColumns);

And the callback:

// pg: the Grid object
fitColumns: function() {
    pg.getView().autoSizeColumns();
}

So easy

Cheers,
Andr

[tgo]

Thanks for sharing. I had reached the same point and could not get the resize event to fire when I needed. Your solution on the layout even works very well for me too. Thanks again.

[jszobody]

This is sort of working for me, but not quite. If I move a region handle, the grid doesn't resize. If I move it again, then the grid resizes, but to the position that it should have been after the first move. It's like it's always one step behind the actual width of the panel.

[jszobody]

Har. It works if I call view.autoSizeColumns() twice. The first call is always a step behind, as previously mentioned. The second call gets it right.

Probably a better way than two calls, maybe a 100ms wait or something?

[mystix]

try

view.autoSizeColumns.defer(100);

for a 100ms delay.