Grid In Table Solution !!!

I finally found a way to successfully present the grid - no matter
what its container is (table, tr, td, div...etc).

Presented here is just the direction for the solution and it works.

Final solution should be more complex and based on values recieved from the object model and not hardcoded, to preserve grid dynamics.

... 

// set grid height in pixel 
var intTotalRows     = 25  // ex. like obj.getRowProperty("count");
var pxRowHeight     = 26; // ex. like row.getStyle("height"); 
var pxHeaderHeight = 20; // ex. like obj.getColumnHeaderHeight();
var pxFooterMargin = 5;  // should be minimum 3

// calc grid  height (used 2 rows for reading simplicity)
var pxGridHeight = (pxRowHeight * intTotalRows);
pxGridHeight = pxGridHeight  + eaderHeight + pxFooterMargin ;

// apply design to grid
obj.setStyle("height", pxGridHeight);

  Grid Style attribute is set to the correct grid height in pixels and so grid is presented in full height and not cropped by container, because there is no more overflow and no need for scrolling.

Sorry spell mistake:

pxGridHeight = pxHeaderHeight  + pxGridHeight  + pxFooterMargin ; 
  If anyone could show me how to set the values dynamically;

Thanks,

another small fix:
// apply design to grid 
obj.setStyle("height", pxGridHeight + "px");