Multi inner grid scroll bar problem

Hi Everyone,

I have just join a new development grup. Our group leader has already worked on the problem. However It look there is no easy way to solve problem. Here is the code:
<html> 

<head> 

   	<script src="../../runtime/lib/aw.js"></script>

    <link href="../../source/styles/xp/aw.css" rel="stylesheet"></link>

</head> 

<body> 

This example shows a grid inserted within a grid. It also illustrates how to expand a row when the plus is clicked. Note that the inserted grid (grid2) is used repeatedly so only 1 row can be expanded at a time. You also could replace grid2 with another AW object such as radio buttons or checkboxes. <b>There are a few bugs in the scrollbar code. The inserted grid seems to inherit scrollbar properties from the main grid.</b>



    <style> 

  

 #Mygrid { font: menu ; margin: 3px 3px 3px 3px;  }  

 #Mygrid .aw-item-text { vertical-align: top; }  

 #Mygrid .aw-alternate-even {    BACKGROUND: #f0fff0 } 

 #Mygrid .aw-alternate-odd { BACKGROUND: #ffffafa } 

 #Mygrid .aw-mouseover-row { BACKGROUND: #b0e0e6; } 

 #Mygrid .aw-rows-selected {    BACKGROUND: #008b8b } 

 #Mygrid .aw-column-0 {width: 20px; border-right: 1px dotted #ccc}



 #Mygrid2 {width: 100px;}

 #Mygrid2 .aw-column-0 {width: 100px; border-right: 1px dotted #ccc}

  

    </style> 



<script> 



        var myData = [ 

            ["+","2/1/2006", "Tom Smith", "Message 1"], 

            ["+","2/1/2006", "Mary Smith", "Message 2"], 

            ["+","2/1/2006", "Ed Barns", "Message 3"], 

            ["+","2/1/2006", "Lisa Jones", "Message 4"], 

            ["+","2/1/2006", "Henry Young", "Message 5"], 

            ["+","2/1/2006", "Billy Edwards", "Message 6"], 

            ["+","2/1/2006", "Emily Sanders", "Message 7"], 

            ["+","2/1/2006", "Bert Norris", "Message 8"], 

            ["+","2/1/2006", "John Doe", "Message 9"],

            ["+","2/1/2006", "Tom Smith", "Message 10"], 

            ["+","2/1/2006", "Tom Smith", "Message 11"], 

            ["+","2/1/2006", "Mary Smith", "Message 12"], 

            ["+","2/1/2006", "Ed Barns", "Message 13"], 

            ["+","2/1/2006", "Lisa Jones", "Message 14"], 

            ["+","2/1/2006", "Henry Young", "Message 15"], 

            ["+","2/1/2006", "Billy Edwards", "Message 16"], 

            ["+","2/1/2006", "Emily Sanders", "Message 17"], 

            ["+","2/1/2006", "Bert Norris", "Message 18"], 

            ["+","2/1/2006", "John Doe", "Message 19"]

        ]; 



        var myData2 = [ 

            ["2/1/2006", "Rob Francis", "Reply 0"], 

        	["2/1/2006", "Ogur", "Reply 1"],

            ["2/1/2006", "Rob Francis", "Reply 2"], 

            ["2/1/2006", "Rob Francis", "Reply 3"]

            ["2/1/2006", "Ahmet", "Reply 4"],

            ["2/1/2006", "Faruk", "Reply 5"],

            ["2/1/2006", "Nacaroglu", "Reply 6"],

        ]; 



        var myColumns = [  "", "Date", "From", "Subject"]; 

        var myColumns2 = ["Date", "From", "Subject"]; 



    </script> 

</head> 

<body> 

    <script> 



AW.Grid.Controllers.Overflow._adjustScrollBars = AW.Grid.Controllers.Overflow.adjustScrollBars; 



AW.Grid.Controllers.Overflow.adjustScrollBars = function() 

{ 

    //alert( this.getId() + " --> adjust scrollbars called.." );



  this._overflowController._adjustScrollBars.call(this); 

   

  // I just hate this freaking long sentence ;) 

  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 not rendered yet 

  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   = "20px"; 

      spacerWidth   = "0px";     

      contentHeight = "100%"; 

    break; 



    case "horizontal": 

      overflowX     = "scroll";     

      paddingBottom = "20px"; 

      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; 

  } 



}; //adjustScrollBars  



    var obj = new AW.UI.Grid; 

    obj.setId('Mygrid'); 

    obj.setCellText(myData); 

    obj.setHeaderText(myColumns); 

    obj.setRowCount(19); 

    obj.setColumnCount(4); 

    obj.setSelectorVisible(false); 

    obj.setSelectorWidth(28); 

    obj.setHeaderHeight(20); 

    obj.setCellEditable(false); // disable editing 

    obj.setSelectionMode("single-row"); 

    obj.setControlSize(500, 300); // width, height 

    obj.setVirtualMode(false);

    

  

    /////////////  V A R S //////////////// 



var actualRow ; 

var lastRow ; 

var lastCol; 

var expandedrow=false;



var defRowH = obj.getRowHeight(0);   //get default row height size 

var custRowH = 110;                 // define your custom row height 

var diffRowH = custRowH - defRowH   // calculates difference 

var numberOfOpenedInnerGrid = 0;



//**************************************// 





var i=-1;



//**************************************// 





obj.onCellClicked = function(event, column, row)

{  		

    //alert( this.getId() + " --> On clicked called...");

    window.status = "Cell " + column + "." + row + " clicked"

    

    if (column==0) 

    {

        //alert(" Here is column 0 ")



        actualRow = row;



        var grid2= new AW.UI.Grid; 

        grid2.setId('Mygrid2'+row); 

        grid2.setStyle('width', '100%'); 

        grid2.setStyle('HEIGHT', custRowH-31 ); 

        grid2.setStyle('BACKGROUND', 'lightyellow' ); 

        grid2.setStyle('COLOR', 'BLUE' ); 

        grid2.setStyle('FONT', 'MENU' ); 



        grid2.setCellText(myData2); 

        grid2.setHeaderText(myColumns2); 

        grid2.setRowCount(myData2.length); 

        grid2.setColumnCount(3); 

        grid2.setSelectorVisible(true); 

        grid2.setSelectorWidth(28); 

        grid2.setHeaderHeight(20); 

        grid2.setRowHeight(20); 

        grid2.setCellEditable(true); // disable editing 

        grid2.setSelectionMode("single-cell"); 

        grid2.setControlSize(400, 80); // width, height 



      	obj.getRowTemplate(row).setContent('whatdoesthisdo', '<div style="position: absolute; left: 25; top: 20; width: 400; z-index: 1000000">'+grid2+'</div>'); 

  		//obj.getRowTemplate(row).refresh();    		 		 

  		

  		if ( expandedrow==true) 

  		{  		    

        	if (lastRow!=row) 

        	{

           		//obj.getRowTemplate(lastRow).setContent('whatdoesthisdo', ''); 

       			//obj.getRowTemplate(lastRow).refresh();  

    		}

  		}

  		

  		

        this.refresh();

  		ExpandRow();   		

  		lastRow=row;   		

    }	

        

} // En of onCellClicked handler..





//*************************************************// 

/// Function to expand collapse row 

//*************************************************// 



function ExpandRow()

{  	

    var actualrowHeight = obj.getRowTemplate(actualRow).getStyle("height"); 

  	

  	expandedrow=true;

    var scrollfirst =  obj.getScrollTop();

    var scrollheight = obj.getScrollHeight();	

    

    //alert( "actualrowHeight: " + actualrowHeight + " \n lastRow: " + lastRow  + "\n defRowH: " + defRowH );



    if( lastRow > 0 )

    {

        //alert(" lastRow is true.. ");

        

    	if( actualrowHeight == defRowH || actualrowHeight == undefined )

    	{	    		    		

     		obj.getRowTemplate(actualRow).setStyle("height", custRowH); 

            obj.setCellText("-",0,actualRow);

        	scrollheight = scrollheight + diffRowH;

        	numberOfOpenedInnerGrid++; 	

    	}

    	else

    	{    		

 			obj.getRowTemplate(actualRow).setStyle("height", defRowH ); 

       		obj.setCellText("+",0,actualRow);

        	scrollheight = scrollheight - diffRowH;  

        	numberOfOpenedInnerGrid--; 

    	} 	

    }     

 	else         //first click in the grid 

 	{  				 		 		

   		obj.getRowTemplate(actualRow).setStyle("height", custRowH); 

   		obj.setCellText("-",0,actualRow);   		   		

   		scrollheight = scrollheight + diffRowH;  

   		numberOfOpenedInnerGrid++;   		

     }   

     

    obj.getRowTemplate(actualRow).refresh();	

    obj.setScrollTop(scrollfirst);

    obj.setScrollHeight( scrollheight );

    

    //alert( "Scroll Height: " + scrollheight );	

}   

     

//*********************************// 





document.write(obj); 



    </script> 

<script>

function newWin(){ 

win= window.open('','_blank'); 



var results =document.documentElement.innerHTML; 

var match = "<"; 



var re = new RegExp("<", "g"); 



var newresults = results.replace(re, "&lt;"); 



win.document.write(newresults ); 

} 

</script>

<input type="button" value="tikla" onclick="newWin()">

<DIV id="deneme"></DIV>

</body> 

</html>
When we open multi inner grid scroll bar is not completely working right. Also we had to make refresh main grid in last section of onCellClicked. This seems not a good solution espacially if we had much more data.

Could anyone help me?

Thanks for advance..
Forum search
