grid shows scrollbars when not needed

Why does the grid sometimes show scrollbars even if all rows and columns are fully visible? It seems that I need to add some extra slop (6 pixels or so) to the grid width & height to avoid this. Is there a better way?

For example, the following grid shows a vertical scrollbar even though all rows are fully visible. It has 1 header + 5 rows each 16 pixels in height, so at 96 pixels no scrollbars are needed, but if the grid height is 102 pixels or less, a vertical scrollbar appears (which merely allows the user to scroll to blank space below the last row)

<style>
#myGrid .aw-alternate-even {background: #eee;}
</style>
<script>
var myData = [
["row 1", "aaa", "123"],
["row 2", "bbb", "456"],
["row 3", "ccc", "789"],
["row 4", "ddd", "321"],
["row 5", "eee", "654"]
];

var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setControlSize(330, 100);
obj.setCellText(myData);
obj.setHeaderHeight(16);
obj.setRowHeight(16);
obj.setColumnCount(3);
obj.setRowCount(5);
document.write(obj);
</script>

Any ideas? This is a problem for my customers, since they use jsp to generate pages containing AW grids from server-side config files. The config files define dimensions for the grids. Many of these files have grids sized so they don't show scrollbars in AW 1.0, but after upgrading to 2.0, they now have unwanted scrollbars. Reconfiguring all of these files would be a big problem.

thanks

CK, not sure if it's what you need , but adding 8px to a calculated height give allways a correct match ( no vert-scroll-bar is painted) i.e:

var obj = new AW.UI.Grid; 
obj.setId("myGrid"); 
obj.setCellText(myData); 
obj.setHeaderHeight(16); 
obj.setRowHeight(16); 
obj.setColumnCount(3); 
obj.setRowCount( myData.length ); 

obj.setControlSize(330, (obj.getRowCount()*obj.getRowHeight())+obj.getHeaderHeight()+8  );

document.write(obj);

Try it with different MyData length's

Thanks Carlos, but the problem is I don't want to add the extra 8 pixels. My users have lots of existing pages using AW 1.0 that they would need to change to make room for the extra pixels! For example they have a one-row grid in AW 1.0 that is sized to show the row with no extra space beneath it. With AW 2.0, the row is obscured by a horizontal scrollbar, unless they reconfigure the page to add 8 pixels to the grid width.

I see, and yes there is an additional scroll width implication ( if need to resize a column over max-grid-width then 24px instead of 8 ) and this result in more free (blank) space at the bottom. Well ,the only solution coming to my mind is doing it with setScrollHeight(0) and width also, but I did not test it.

As a bad workaround ( never show a vert scroll-bar) you can do:

obj.setControlSize(330, (obj.getRowCount()*obj.getRowHeight())+obj.getHeaderHeight()+24 );
obj.getScrollTemplate().setStyle('height', (obj.getRowCount()*obj.getRowHeight())+obj.getHeaderHeight()+21 );

Thanks Carlos. I'm going to try your workaround and also maybe a custom adjustScrollHeight handler. I'll post the results.

Yes, in AW 2.0 the scrollbars may take more space than necessary and the calculation algorithm is not pixel-perfect. I consider this as a bug and will try to fix in the future, however for now the only thing that might be done is custom adjustScrollBars handler (/source/lib/grid/_overflow.js)

Before I saw Alex's post I tried this custom adjustScrollHeight handler (the lines not marked as custom are from the original in _scroll.js):

obj.adjustScrollHeight = function() {
    var h = this.getRowCount() * this.getRowHeight();
    h += this.getContentHeight(0);
    h += this.getContentHeight(2);
    h -= 4;		//custom (be less eager to show vert scrollbar)
    this.setScrollHeight(h+3);
    return 1;	//custom (don't call orig handler)
    }

It fixed my problem in most cases, but in IE the last row was clipped a bit at the bottom when both scrollbars were visible. So I used Alex's suggestion instead and made a similar change to the adjustScrollBars handler.

I faced a problem in setting the vertical scroll bar height of AW Grid. Eventhough the grid contains more records, the display of vertical scroll bar height covers only 1/4 of the AW Grid.But when I refresh or sort the Grid, then the vertical scroll bar height will change according to the height of the Grid. It could be greatful if some body post the answer ?

The solution is to change the CSS Grid Class (.aw-grid-control). Change the width to auto and height to 100%. Then the scroll bar height will change accordingly based on the height of AW Grid and the table which contains either the AW Grid or the container

Great solution carlos