Grid Resizing with Javascript

[ndeppe]

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

Code: Select all

grid.render()

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:

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 680 times

[ndeppe]

I did find a work-around for this. For some reason, if I were to set the "row height" property of the grid, the scrollbar is repositioned. I haven't tried any other properties, but this one seems to work.

I would have thought that the grid.render() function would reset the scrollbar, but at least I have a workaround for now.

[Bruno97]

Thanks for this tip. Doing this also works :
getObj("myGrid").grid.setProperty("scrollbar","sliding");

[SeanTyree]

An alternate to resizing the layout and/or grid with Javascript would be to set the layout to a percent width & left (I use 5% left and 90% width), then set the grid to expand to layout = true.

Sean

[ndeppe]

@Bruno97 - I gave that a try and it worked. Thanks!

@SeanTyree - That would be much easier. My problem with this particular screen is it has a search panel on the left and a grid on the right. The user can enter search parameters in the panel on the left, and the results appear on the right. I can't use percentage based sizing/positioning because the search panel is fixed width. The code that I originally posted didn't include any of that for simplification.