auto resize for the gird

Hi,
Now i use below css code to implement the auto resize of the row. And now the height of the row will auto adjust when i adjust the cell's length, if the text wrap more columns the height will increase auto.

.aw-grid-cell {border-right: 0px solid threedlightshadow;height:auto;vertical-align:top;overflow:auto;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;height:auto;}

But now the problems that what i had is the gird's height can't auto adjust when i use this way. And didn't show the vertical scroll bar. So i can't saw all the rows in this gird.

If I add this css code :

.aw-grid-control {height: 500%; width: 100%; }

Then I can saw the whole rows but the gird height is too large to show in the page. And i try this

.aw-grid-control {height: auto; width: 100%; }

It didn't work.

So who can help me fix this problems? TKs.

The current version (2.0) will not work with auto-sized rows because the scroll height calculation will be broken. I am planning to fix this in the future.

Here's a method that seems to work w/ AW 2.0.1-std-developer in Firefox 1.5.0.5 and IE 6.0 to autosize an AW.UI.Grid. Basically, you have to first render the grid to some predefined size and then invoke this method below.. you can use CSS settings to set the initial size settings do this if you want ... (i do myGrid.setClass("my", "grid"); and a CSS of .aw-my-grid{ width: 50px; height: 50px } and it seems to work)

Then, after you've rendered it to the initial settings, call the autoHeight method described below on your grid object and it will sort itself out to the right height and width, with no scrollbars.

In my situation this doesn't apply, but there might be situations where a timeout might be necessary between rendering your grid and invoking this autoHeight() method. Or maybe not??

var myGrid = new AW.UI.Grid;
// set everything up as far as data goes
myGrid.autoHeight = function() {
var headerId = this.getId() + "-headers";
var row1Id = this.getId() + "-row-0";
var contentId = this.getId() + "-scroll-content";
var elGrid = document.getElementById( this.getId() );
var elHeader = document.getElementById( headerId );
var elRow = document.getElementById( row1Id );
var elContent = document.getElementById( contentId );
var height = elHeader.offsetHeight + (elRow.offsetHeight * this.getRowCount() );
var width = 0;
for( var col = 0; col < this.getColumnCount(); col++ ) {
var cid = this.getId() + "-cell-" + col + "-0";
var e = document.getElementById( cid );
width = width + e.offsetWidth;
}
this.setStyle("height", height );
this.setStyle("width", width);
this.getTemplate("scroll").setClass("scrollbars", "none");
this.getTemplate("scroll").getContent("content").setStyle("width", width);
this.getTemplate("scroll").getContent("content").setStyle("height", height );

};

/* call that method AFTER you've rendered the grid to a static pre-defined height
*/
myGrid.autoHeight();

Good luck!
-at