3.0.5

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..

Nacaroglu
May 2,

This topic is archived.

See also:


Back to support forum