How to launch GridX column width recalculation aft

问题:

According to documentation:

https://github.com/oria/gridx/wiki/Create-the-Simplest-Gridx

Never forget to call grid.startup(), since the column width calculation and layout rendering need to access the geometry information of grid DOM nodes.

If I have the grid with columns, that have no width specified, and autoWidth is set to false, startup() calculates the size of columns so, that they fill the whole viewport horizontally. However, if viewport is expanded, and extra empty space is inserted after the last column. If the viewport is narrowed, the last columns are not more visible (and no scroll is rendered).

So I think the best workaround is to launch the recalculation of columns sizes manually, after the viewport was resized. But I can't find an API method to do that.

How to call column width recalculation and layout rendering on existing grid?

回答1:

What I've done for this situation is setup an event handler to watch for window resize events, then set the width to the current grid width. When creating the grid:

function _resizeToWindow(grid, gridId) {
  grid.resize({w: dom.byId(gridId).offsetWidth, h: undefined});
}

on(window, "resize", function() {
  _resizeToWindow(grid, gridId);
});

It looks a little odd to resize the grid to the current width of the grid, but calling that function will cause the grid to be rendered again with appropriate column widths for the new grid width.