V2.02 grid refreshed by AJAX scrollbars grayed out or flickers

I'm using a grid in my asp.net page and refreshing its contents from another url via AJAX. I'm having problem trying to have the grid's scrollbar displayed and function in the valid way. Found an example from http://www.FriendsOfAW.com example, which was fairly close to what I am working on, and based my scripts on it. But whenever grid is refreshed by a click of a submit button, the contents are displayed, but scrollbars are either grayed out, or flickers, depending on how many rows are displayed. Could you help, please!! Obviously I'm not too familiar with modifying templates within AW, and little knowledge of Javascript, so it's been real difficult for me to deal with...

Could anyone help please!!!

<style> 
     #EHEventListGrid { font: menu ; margin: 3px 3px 3px 3px;  } 
     #EHEventListGrid .aw-item-text { vertical-align: top; } 
     #EHEventListGrid .aw-alternate-even {    BACKGROUND: #f0fff0 } 
     #EHEventListGrid .aw-alternate-odd { BACKGROUND: #ffffafa } 
     #EHEventListGrid .aw-mouseover-row { BACKGROUND: #b0e0e6; } 
     #EHEventListGrid .aw-rows-selected {    BACKGROUND: #008b8b } 
     #EHEventListGrid .aw-column-0 {width: 10px; border-right: 1px dotted #ccc} 
</style> 
<script language=javascript type="text/javascript"> 
     AW.Grid.Controllers.Overflow._adjustScrollBars =  AW.Grid.Controllers.Overflow.adjustScrollBars; 
     AW.Grid.Controllers.Overflow.adjustScrollBars = function() 
     {   this._overflowController._adjustScrollBars.call(this); 
         function getById(id) 
         {   return document.getElementById(id); } 
         var id = this.getId();  
         var overflow      = "hidden";  
         var overflowX     = "hidden";  
         var overflowY     = "hidden";  
         var marginRight   = "0px";     
         var paddingBottom = "0px";     
         var spacerWidth;   
         var spacerHeight;  
         var contentHeight; 
         var contentWidth;  
         if (!this.element()) 
         {   return;  } 
         switch (this.getScrollBars()) 
         {   case "none": 
                 spacerWidth = "0px"; 
                 spacerHeight = "0px"; 
                 contentHeight = "100%"; 
                 contentWidth = "100%" 
                 break; 
             case "both": 
                 overflow = "scroll"; 
                 overflowX = "scroll"; 
                 overflowY = "scroll"; 
                 marginRight = "20px"; 
                 paddingBottom = "20px"; 
                 break; 
             case "vertical": 
                 overflowY = "scroll"; 
                 marginRight = "0px"; 
                 spacerWidth = "0px"; 
                 contentHeight = "100%"; 
                 break; 
             case "horizontal": 
                 overflowX = "scroll"; 
                 paddingBottom = "0px"; 
                 spacerHeight = "0px"; 
                 contentWidth = "100%"; 
                 break; 
         } 
         getById(id + "-scroll").runtimeStyle.paddingBottom = paddingBottom;  
         getById(id + "-scroll-box").runtimeStyle.overflow  = overflow;  
         getById(id + "-scroll-box").runtimeStyle.overflowX = overflowX;   
         getById(id + "-scroll-box").runtimeStyle.overflowY = overflowY;  
         getById(id + "-scroll-content").runtimeStyle.marginRight = marginRight; 
         if (contentWidth) 
         {   getById(id + "-scroll-content").runtimeStyle.width = contentWidth;  }  
         if (contentHeight) 
         {   getById(id + "-scroll-content").runtimeStyle.height = contentHeight;  }  
         if (spacerWidth)  
         {   getById(id + "-scroll-box-spacer").runtimeStyle.width = spacerWidth;  }  
         if (spacerHeight) 
         {   getById(id + "-scroll-box-spacer").runtimeStyle.height = spacerHeight;  }  
     }     
</script> 

<script>
     var grdEHEventList = new AW.UI.Grid; 
     grdEHEventList.setId("EHEventListGrid"); 
</script>

<script>
     btnEHEventList.setControlText("Refresh List"); 
     btnEHEventList.setStyle("left", "620px"); 
     btnEHEventList.setStyle("width", "78px"); 
     btnEHEventList.setStyle("top", "124px"); 
     btnEHEventList.setStyle("height", "22px"); 
     grdEHEventList.setSelectionMode("single-row") ; 
     grdEHEventList.setSelectorVisible(false); 
     grdEHEventList.setSelectorWidth(10); 
     grdEHEventList.setHeaderHeight(17); 
     grdEHEventList.setCellEditable(false); 
     grdEHEventList.setSelectionMode("single-row"); 
     grdEHEventList.setControlSize(417, 258); 
     grdEHEventList.setVirtualMode(false); 
</script> 
<script language=javascript type="text/javascript"> 
     function EHPostReqAW() 
     {   var tblEHEventList = new AW.XML.Table; 
         tblEHEventList.setURL(targetURL_EL); 
         tblEHEventList.setParameter("ComponentUID", getCompID()); 
         tblEHEventList.setParameter("FiscalYear", getEHFiscalYear()); 
         tblEHEventList.setParameter("FiscalPeriod", getEHFiscalPeriod()); 
         tblEHEventList.setRequestMethod("Post"); 
         tblEHEventList.setRows("//NewDataSet/*"); 
         tblEHEventList.request(); 
         grdEHEventList.setHeaderText(["EventID", "Event", "Instance", "Starts", "Ends", "Status"]); 
         grdEHEventList.setColumnCount(6); 
         grdEHEventList.setCellModel(tblEHEventList); 
         grdEHEventList.setColumnIndices([0,1,2,3,4,5]); 
         var strFormat = new AW.Formats.String; 
         var dtFormat = new AW.Formats.Date; 
         dtFormat.setTextFormat("yyyy-mmm-d"); 
         grdEHEventList.setCellFormat([strFormat, strFormat, strFormat, dtFormat, dtFormat, strFormat]); 
         grdEHEventList.clearScrollModel(); 
         grdEHEventList.raiseEvent("adjustScrollHeight"); 
         grdEHEventList.raiseEvent("adjustScrollWidth"); 
         grdEHEventList.refresh(); 
     } 
     btnEHEventList.onControlClicked = function(event) { 
         if (VerifyEHEventListParameters()) 
         {   return EHPostReqAW(); } 
     } 
</script> 
 

Sorry, I cannot figure out what this script does and why do you need these manipulations with scrollbars. Can you explain? Or maybe just tell what you are trying to achieve in the end?

Thanks for the reply. It's a grid-in-a grid situation. A row expands when clicked, displaying the second grid with the more details. I'm still evaluating the grid, and I found this script at the site http://www.FriendsOfAW.com It appeared similar to what I was trying to do, so I copied the script and tested it out. I'm modifying the grid's scrollbar properties in order to eliminate the extra spacing after the last column, and make sure that the scrollbars are positioned and sized appropriately when displayed, according to the grid's rowcount? When the primary grid is displayed, the scrollbar either is grayed out, or flickers. Am I doing something wrong here?