Grid Resizing with Javascript
Posted: Wed Sep 02, 2015 1:32 pm
I set up a grid with horizontal scrolling based on instructions in another post. I created a Simple Container Layout with overflow-x set to "scroll". I then plopped the grid into the layout. The scrolling works as expected - I get the horiziontal scrollbar and the vertical scrollbar. The problem comes up when I try to resize the layout element using Javascript. I want to be able to set the width of the grid layout based on the width of the window. There is a lot of information in the grid, so I want to be able to use as much of the real estate as I can.
Doing this with Javascript is pretty simple. I just get the window width, the left position of the grid layout, and I set the layout width to the window width - grid left - a little extra space for good measure. That works fine, but the problem is the vertical scrollbar in the grid does not move. It only moves once the user starts scrolling horizontally.
I tried using after I do all of the resizing, but it does not re-position the scrollbar.
Does anyone have a suggestion on how to do this properly?
Here is the code I'm using:
This is what the screen looks like after it is resized. The vertical scroll bar stays where it is until the user scrolls using the horizontal scroll bar.
Doing this with Javascript is pretty simple. I just get the window width, the left position of the grid layout, and I set the layout width to the window width - grid left - a little extra space for good measure. That works fine, but the problem is the vertical scrollbar in the grid does not move. It only moves once the user starts scrolling horizontally.
I tried using
Code: Select all
grid.render()Does anyone have a suggestion on how to do this properly?
Here is the code I'm using:
Code: Select all
resizeInqWindow = function() {
var objGrid = getObj('inq_grid');
var puiDim = pui.getDimensions(pui.runtimeContainer);
var winSize = pui.getWindowSize();
var intWinWidth = winSize.width;
var intGridWidth = intWinWidth - $('#inq_grid_layout').position().left - 30;
applyProperty('inq_grid_layout', 'width', intGridWidth.toString() + 'px');
objGrid.grid.render();
};
This is what the screen looks like after it is resized. The vertical scroll bar stays where it is until the user scrolls using the horizontal scroll bar.
- resizeissue1.png (49.2 KiB) Viewed 682 times