3.0 beta 2

2.0 - I need a Grid inside a Grid

I think I need a grid within a grid example for version 2.0.

I need a parent/child display to represent questions and their (0 or more) answers. I don't think I can use the tree control because I want the multicolumn and sorting offered by the grid (however the expand and collapse of the tree is exactly the type of thing I need).

The data might look like:

Q: Fred <tab> What does it look like <tab> Feb 14, 2006
A: Rob <tab> It is red <tab> Feb 14, 2006
A: Rob <tab> Update: Here is a picture <tab> Feb 15, 2006
Q: Tom <tab> Do you take checks <tab> Feb 14, 2006
A: Rob <tab> Yes <tab> Feb 14, 2006

I need to support sorting on the date column but of course the answers need to stay grouped with the corresponding question.

Here are a couple of examples in 1.0 that are close to what I need:

Austin Mayberry
http://www.poeticdata.com/griddemo

Carlos
http://www.telefonica.net/web2/webtress/awsamp/examples/md_ddgrid.html

Does anyone have examples or ideas they can share (for 2.0)?
Rob Francis
February 15,
The second example doesn't look like a grid IN a grid, it is a grid ON a grid. This should be very easy to do. Create two grids at the document level then hide the second one until needed. then change it's data and show it.
Jim Hunter (www.FriendsOfAW.com)
February 15,
Good point Jim! I wasn't even thinking along those lines but you might be right. Could it be easier than I thought? Hmmm...
Rob Francis
February 15,
Ahh, here is a good 1.0 example from Cameron
http://www.terriblecow.com/awc/ex_row/dyntable.html

The original thread is at:
/datagrid.4452/this-is-a-great-example.html
Rob Francis
February 16,
Rob, just a few questions.
Do you need the row-height expansion ( to avoid overlaping)... or
you don't mind to hide some rows below with the new drop-down grid ??

And a last one, Are you going to make a value selection on the dd-grid to replace the text in Main-cell ?

I ask it because could be some "little functionallity differences" and the complexity differs.

I agree Jim , most of this work (in V-2.0) can be done at doc level, although in V-1.X was not so easy ( anyway above samples not only shows how to fire a drop-down grid ) but also, how to create a grid inside a template, pass parameters etc.... :-)
Thanks
Carlos
February 16,
Hi Carlos,

I really like the row height expansion in Cameron's example. I think this could be done using the code below on expand and then set the height back to default on collapse.

var template = obj.getRowTemplate(rowtoexpand); 
        template.element().style.height = "50";


I don't mind having the expanded row being a fixed height since the grid within will have scrollbars.

Thanks for your help
Rob Francis
February 16,
Also, for my case the value selection will NOT replace the main cell text.
Rob Francis
February 16,
I did not express myself correctly,
The complex is not in the expand-row , but in maintain more than one open ( every row its own detail-grid ), is this your case ?? or just one expanded row-grid at a time is enough for your needs.
Thanks
Carlos
February 16,
Oh, just 1 row at a time for my case.
Rob Francis
February 16,
Rob, I give up!
This sample only shows how to make any object drop-down from a cell.
I leave you the easy part of expand-collapse the row. :-)
I mix some controls, passing the objects to a custom Span subclass
( as Alex told in a post) and disable the vertical scroll.
HtH
Carlos
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
    <style>
 #Mygrid { font: menu ; margin: 3px 3px 3px 3px;  } 
 #Mygrid .aw-alternate-even {	BACKGROUND: #f0fff0 }
 #Mygrid .aw-alternate-odd { BACKGROUND: #ffffafa }
 #Mygrid .aw-mouseover-row { BACKGROUND: #b0e0e6; CURSOR: hand }
 #Mygrid .aw-rows-selected {	BACKGROUND: #008b8b }
                #Mygrid	.aw-item-text { vertical-align: top; } 
 #Mygrid2 { font: menu ; margin: 3px 3px 3px 3px;}
</style>
<script>

        var myData = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
        ];

        var myColumns = [	"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"	];
        
    </script>
</head>
<body>
    <script>

    var obj = new AW.UI.Grid;
obj.setId('Mygrid');
    obj.setCellText(myData);
    obj.setHeaderText(myColumns);
    obj.setRowCount(20);
    obj.setColumnCount(5);
    obj.setSelectorVisible(false);
    obj.setSelectorWidth(28);
    obj.setHeaderHeight(20);
    obj.setCellEditable(false); // disable editing
    obj.setSelectionMode("single-row");
 obj.setControlSize(500, 300); // width, height

//**************************************//
    var objddgrid = new AW.UI.Grid;
objddgrid.setId('Mygrid2');
    objddgrid.setCellText(myData);
    objddgrid.setHeaderText(myColumns);
    objddgrid.setRowCount(20);
    objddgrid.setColumnCount(5);
    objddgrid.setSelectorVisible(false);
    objddgrid.setSelectorWidth(28);
    objddgrid.setHeaderHeight(20);
    objddgrid.setCellEditable(false); // disable editing
    objddgrid.setSelectionMode("single-cell");
 objddgrid.setControlSize(320, 100); // width, height
 
 objddgrid.onCellClicked 		= function(event, column, row){ 
obj.setCellText( this.getCellText( column, row ),lastcol, lastrow)  ;
whattodisplay.setStyle("display", "none") ;
CotractRow(lastrow);
}

//**************************************//
 	var objradio = new AW.UI.Radio;
 		objradio.setId("myRadio");	
    objradio.setItemText(["Home", "Favorites", "Font size", "Search"]);
    objradio.setItemImage(["home", "favorites", "fontsize", "search"]);
    objradio.setItemCount(4);
    objradio.setSelectedItems([0]);
    objradio.setControlSize(100, 100);	// width, height
    
    objradio.onCurrentItemChanged = function(i){ 
obj.setCellText( this.getItemText(i), lastcol, lastrow) 
whattodisplay.setStyle("display", "none") ;
CotractRow(lastrow);
};

//**************************************//
    var objlist = new AW.UI.List;
    objlist.setId("myList");	// necessary for CSS rules
        objlist.setClass("flow", "vertical");	// top-to-bottom (default)
    objlist.setItemText(["Home", "Favorites", "Font size", "Search"]);
    objlist.setItemImage(["home", "favorites", "fontsize", "search"]);
        objlist.setItemCount(4);
    objlist.setControlSize(100, 100);	// width, height
    
objlist.onCurrentItemChanged = function(i){ 
obj.setCellText( this.getItemText(i), lastcol, lastrow) 
whattodisplay.setStyle("display", "none") ;
CotractRow(lastrow);
};

//**************************************//
    var objtextarea = new AW.HTML.TEXTAREA; 
    objtextarea.setStyle("width", '300');
    objtextarea.setStyle("height", "100");
        objtextarea.setStyle("background", "lightyellow");
    objtextarea.setAttribute("readonly", "true");
     objtextarea.setContent("text", 'WARNING: This software program is protected by copyright law and international treaties. Unauthorized reproduction or distribution of this program, or any portion of it, may result in severe civil and criminal penalties, and will be prosecuted to the maximum extent possible under the law.');
//*************************************//

var whattodisplay;
var lastcol;
var lastrow;

var isanyddvisible = false;

var lastTopPos;
//**************************************//

  /////// SCROLL-TOP CHANGED (ENABLE / DISABLE SCROLL )//////////////
  obj.onScrollTopChanged = function(top){ 
 if(isanyddvisible){ if (top != lastTopPos){ return "obj.setScrollTop(lastTopPos)" } }
  }
 obj.onScrollTopError = function(error){  eval(error);  } 
 ///******************///
//**************************************//
obj.onCellClicked 		= function(event, column, row){ 
/// hide drop-down object
whattodisplay.setStyle("display", "none") ;

isanyddvisible = false;
}

//**************************************//
obj.onCellDoubleClicked 		= function(event, column, row){ 

/// retaint scroll pos
lastTopPos = obj.getScrollTop();

isanyddvisible = true;

if(column==0){ 
whattodisplay = GridParameter;
whattodisplay.setStyle("display", "block") ; 
 }

if(column==1){ 
whattodisplay = ListParameter;
whattodisplay.setStyle("display", "block") ; 
 }

if(column==2){ 
whattodisplay = RadioParameter;
whattodisplay.setStyle("display", "block") ; 
 }

if(column==3){ 
whattodisplay = TextAParameter;
whattodisplay.setStyle("display", "block") ; 
 }

/// postion the drop-down object below cell 
var el = obj.getCellTemplate(column, row).element();

if(!AW.ie) {
whattodisplay.setStyle("left", AW.getLeft(el) - obj.getScrollLeft() ); 
whattodisplay.setStyle("top", AW.getTop(el) - obj.getScrollTop() + el.offsetHeight );
}
else{
whattodisplay.setStyle("left", AW.getLeft(el) - 2 ); 
whattodisplay.setStyle("top", AW.getTop(el) - 3 + el.offsetHeight  );
}

lastcol=column;
lastrow=row;
}

//************************************************//
////// CUSTOM --HTML.SPAN.subclass-- CONTAINER
//************************************************//
var MyDDSpan = AW.HTML.SPAN.subclass(); 

MyDDSpan.create = function(){ 

    var obj = this.prototype; 
    var _super = this.superclass.prototype; 
    // constructor 
    obj.init = function(argument){ 
        // calling parent constructor 
        _super.init.call(this); 
        
         obj.setStyle("position", "absolute");
          
 obj.setStyle("background", "#bbbbbb");
 obj.setStyle("z-index", "100000");
   
         var workarea = new AW.HTML.DIV; 
     workarea.setContent("text", argument.toString()); 
 
         obj.setContent("html",  workarea);        
    } 
} 
//************************************************//
//// DEFINE VARS / INSTANCES OF CUSTOM CONTROL PASSING OBJECTS AS PARAMETER

 var GridParameter = new MyDDSpan(objddgrid);
GridParameter.setStyle("display", "none") ;   
document.write(GridParameter);

 var ListParameter = new MyDDSpan(objlist); 
ListParameter.setStyle("display", "none") ;   
document.write(ListParameter);

 var RadioParameter = new MyDDSpan(objradio); 
RadioParameter.setStyle("display", "none") ;   
document.write(RadioParameter);

 var TextAParameter = new MyDDSpan(objtextarea); 
TextAParameter.setStyle("display", "none") ;   
document.write(TextAParameter);

document.write(obj);

</script>
</body>
</html>
Carlos
February 16,
Wow Carlos ... this is a great example. Many thanks.

Jim ... this should be added as a demo on FriendsOfAW.com
Rob Francis
February 16,
Upps ..Sorry i missed one important line inside onClick, but there is no need to restore scroll position on every click, so need a new condition, please the replace whole function with:
obj.onCellClicked = function(event, column, row){
if(isanyddvisible) {
/// hide drop-down object
whattodisplay.setStyle("display", "none") ;
///restore scrolltop position
obj.setScrollTop(lastTopPos);
isanyddvisible = false;
}
}


Another mistake, replace the three lines that say:
CotractRow(lastrow);
with:
isanyddvisible = false;

Also cell selection make more sense here:
obj.setSelectionMode("single-cell");
Thanks
Carlos
February 17,
Hi Carlos,

This example looks great and will be real useful to me. I found one small bug. In the case where you have a drop down visible, scroll the main grid and then select an item from your drop down which closes it ... no call was being made to restore the scrolltop. You had that case in other places such as a cellclick on the main grid to close the drop down.

I added that by putting in a 'hidedd()' function.

Here is the entire sample:

<html> 
<head> 
<script src="runtime/lib/aw.js"></script> 
<link href="runtime/styles/xp/aw.css" rel="stylesheet"></link> 
</head> 
<body> 
    <style> 
 #Mygrid { font: menu ; margin: 3px 3px 3px 3px;  }  
 #Mygrid .aw-alternate-even {    BACKGROUND: #f0fff0 } 
 #Mygrid .aw-alternate-odd { BACKGROUND: #ffffafa } 
 #Mygrid .aw-mouseover-row { BACKGROUND: #b0e0e6; CURSOR: hand } 
 #Mygrid .aw-rows-selected {    BACKGROUND: #008b8b } 
                #Mygrid    .aw-item-text { vertical-align: top; }  
 #Mygrid2 { font: menu ; margin: 3px 3px 3px 3px;} 
</style> 
<script> 

        var myData = [ 
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"], 
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"], 
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"], 
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"], 
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"], 
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"], 
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"], 
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"], 
            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"], 
            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"], 
            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"], 
            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"], 
            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"], 
            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"], 
            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"], 
            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"], 
            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"], 
            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"], 
            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"], 
            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"] 
        ]; 

        var myColumns = [    "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"    ]; 
         
    </script> 
</head> 
<body> 
    <script> 

    var obj = new AW.UI.Grid; 
    obj.setId('Mygrid'); 
    obj.setCellText(myData); 
    obj.setHeaderText(myColumns); 
    obj.setRowCount(20); 
    obj.setColumnCount(5); 
    obj.setSelectorVisible(false); 
    obj.setSelectorWidth(28); 
    obj.setHeaderHeight(20); 
    obj.setCellEditable(false); // disable editing 
    obj.setSelectionMode("single-row"); 
    //obj.setSelectionMode("single-cell");
 obj.setControlSize(500, 300); // width, height 


//**************************************// 
    var objddgrid = new AW.UI.Grid; 
    objddgrid.setId('Mygrid2'); 
    objddgrid.setCellText(myData); 
    objddgrid.setHeaderText(myColumns); 
    objddgrid.setRowCount(20); 
    objddgrid.setColumnCount(5); 
    objddgrid.setSelectorVisible(false); 
    objddgrid.setSelectorWidth(28); 
    objddgrid.setHeaderHeight(20); 
    objddgrid.setCellEditable(false); // disable editing 
    objddgrid.setSelectionMode("single-cell"); 
    objddgrid.setControlSize(320, 100); // width, height 
  
objddgrid.onCellClicked         = function(event, column, row){  
obj.setCellText( this.getCellText( column, row ),lastcol, lastrow)  ; 
hidedd();
} 

//**************************************// 
    var objradio = new AW.UI.Radio; 
    objradio.setId("myRadio");     
    objradio.setItemText(["Home", "Favorites", "Font size", "Search"]); 
    objradio.setItemImage(["home", "favorites", "fontsize", "search"]); 
    objradio.setItemCount(4); 
    objradio.setSelectedItems([0]); 
    objradio.setControlSize(100, 100);    // width, height 
     
    objradio.onCurrentItemChanged = function(i){  
      obj.setCellText( this.getItemText(i), lastcol, lastrow)  
      hidedd();
    }; 

//**************************************// 
    var objlist = new AW.UI.List; 
    objlist.setId("myList");    // necessary for CSS rules 
    objlist.setClass("flow", "vertical");    // top-to-bottom (default) 
    objlist.setItemText(["zHome", "Favorites", "Font size", "Search"]); 
    objlist.setItemImage(["home", "favorites", "fontsize", "search"]); 
    objlist.setItemCount(4); 
    objlist.setControlSize(100, 100);    // width, height 
     
    objlist.onCurrentItemChanged = function(i){  
      obj.setCellText( this.getItemText(i), lastcol, lastrow)  
      hidedd();
    }; 

//**************************************// 
    var objtextarea = new AW.HTML.TEXTAREA;  
    objtextarea.setStyle("width", '300'); 
    objtextarea.setStyle("height", "100"); 
    objtextarea.setStyle("background", "lightyellow"); 
    objtextarea.setAttribute("readonly", "true"); 
     objtextarea.setContent("text", 'WARNING: This software program is protected by copyright law and 

international treaties. Unauthorized reproduction or distribution of this program, or any portion of it, may 

result in severe civil and criminal penalties, and will be prosecuted to the maximum extent possible under 

the law.'); 
//*************************************// 

var whattodisplay; 
var lastcol; 
var lastrow; 

var isanyddvisible = false; 

var lastTopPos; 
//**************************************// 

  /////// SCROLL-TOP CHANGED (ENABLE / DISABLE SCROLL )////////////// 
  obj.onScrollTopChanged = function(top){  
 if(isanyddvisible){ if (top != lastTopPos){ return "obj.setScrollTop(lastTopPos)" } } 
  } 
 obj.onScrollTopError = function(error){  eval(error);  }  
 ///******************/// 
//**************************************// 
obj.onCellClicked = function(event, column, row){ 
if(isanyddvisible) {
  hidedd();
} 
} 

//**************************************// 
obj.onCellDoubleClicked         = function(event, column, row){  

/// retaint scroll pos 
lastTopPos = obj.getScrollTop(); 
window.status=lastTopPos;
isanyddvisible = true; 

if(column==0){  
whattodisplay = GridParameter; 
whattodisplay.setStyle("display", "block") ;  
 } 

if(column==1){  
whattodisplay = ListParameter; 
whattodisplay.setStyle("display", "block") ;  
 } 

if(column==2){  
whattodisplay = RadioParameter; 
whattodisplay.setStyle("display", "block") ;  
 } 

if(column==3){  
whattodisplay = TextAParameter; 
whattodisplay.setStyle("display", "block") ;  
 } 

/// postion the drop-down object below cell  
var el = obj.getCellTemplate(column, row).element(); 

if(!AW.ie) { 
whattodisplay.setStyle("left", AW.getLeft(el) - obj.getScrollLeft() );  
whattodisplay.setStyle("top", AW.getTop(el) - obj.getScrollTop() + el.offsetHeight ); 
} 
else{ 
whattodisplay.setStyle("left", AW.getLeft(el) - 2 );  
whattodisplay.setStyle("top", AW.getTop(el) - 3 + el.offsetHeight ); 
} 

lastcol=column; 
lastrow=row; 
} 

function hidedd() {
  /// hide drop-down object 
  whattodisplay.setStyle("display", "none") ; 
  isanyddvisible = false;
  ///restore scrolltop position 
  obj.setScrollTop(lastTopPos); 
}


//************************************************// 
////// CUSTOM --HTML.SPAN.subclass-- CONTAINER 
//************************************************// 
var MyDDSpan = AW.HTML.SPAN.subclass();  

MyDDSpan.create = function(){  

    var obj = this.prototype;  
    var _super = this.superclass.prototype;  
    // constructor  
    obj.init = function(argument){  
        // calling parent constructor  
        _super.init.call(this);  
         
         obj.setStyle("position", "absolute"); 
           
 obj.setStyle("background", "#bbbbbb"); 
 obj.setStyle("z-index", "100000"); 
    
         var workarea = new AW.HTML.DIV;  
     workarea.setContent("text", argument.toString());  
  
         obj.setContent("html",  workarea);         
    }  
}  
//************************************************// 
//// DEFINE VARS / INSTANCES OF CUSTOM CONTROL PASSING OBJECTS AS PARAMETER 

 var GridParameter = new MyDDSpan(objddgrid); 
GridParameter.setStyle("display", "none") ;    
document.write(GridParameter); 

 var ListParameter = new MyDDSpan(objlist);  
ListParameter.setStyle("display", "none") ;    
document.write(ListParameter); 

 var RadioParameter = new MyDDSpan(objradio);  
RadioParameter.setStyle("display", "none") ;    
document.write(RadioParameter); 

 var TextAParameter = new MyDDSpan(objtextarea);  
TextAParameter.setStyle("display", "none") ;    
document.write(TextAParameter); 

document.write(obj); 

</script> 
</body> 
</html>
Rob Francis
February 17,
I missed that also ??? ( one more day one less neurona ) ;-)
Thanks for the fix,
I was so close to complete row-expansion yesterday that I'll give it another try, I hope I can finish and post it soon, if so, maybe it will be almost what you need. ( and coul be useful for others )
Thanks
Carlos
February 17,
Hi Carlos,

In the previous version I accidently left in:
obj.setSelectionMode("single-row");

When I meant to change it as you suggested to:
obj.setSelectionMode("single-cell");

For the expand try this:

Add a new var:
var lastrowheight;


At the END of the obj.onCellDoubleClicked function add:

lastrowheight=obj.getRowHeight(row);
    var template = obj.getRowTemplate(row); 
    template.element().style.height = lastrowheight+105;


(Note: I hard coded the 105 ... 100 is the dropdown size and 5 as a buffer. Maybe this could be calculated from 'whattodisplay')

The replace hidedd() with:

function hidedd() {
  /// hide drop-down object 
  whattodisplay.setStyle("display", "none") ; 
  isanyddvisible = false;
  ///restore scrolltop position 
  obj.setScrollTop(lastTopPos); 
  var template = obj.getRowTemplate(lastrow); 
  template.element().style.height = lastrowheight;         
}


Rob Francis
February 17,
Hey Carlos,

Do you know how to adjust for the entire page being scrolled down?

The following code doesn't account for a long page that is scrolled so the dropdown appears in the wrong location

/// postion the drop-down object below cell   
var el = obj.getCellTemplate(column, row).element();  

if(!AW.ie) {  
whattodisplay.setStyle("left", AW.getLeft(el) - obj.getScrollLeft() );   
whattodisplay.setStyle("top", AW.getTop(el) - obj.getScrollTop() + el.offsetHeight );  
}  
else{  
whattodisplay.setStyle("left", AW.getLeft(el) - 2 );   
whattodisplay.setStyle("top", AW.getTop(el) - 3 + el.offsetHeight );  
}
Rob Francis
February 18,
Nice job!, it is really cool.
but I need more then one expanded rows. I mean, I should expand more then one rows. By the way, scrollbar should adjust to changes. Is anybody have an example...
Ozgur
April 1,
Example with more than one expandable grids.

I made a slight change to one of above exmaples. There is a bug with scrollbar. I don't understand why, but scrolltop changes sometimes.

<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 1"], 
        ["2/1/2006", "Ogur", "Reply 1"],
            ["2/1/2006", "Rob Francis", "Reply 2"], 
            ["2/1/2006", "Rob Francis", "Reply 3"]
        ]; 

        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() { 

  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 i=-1;

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


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

if (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();  
    }
  }
  ExpandRow(); 
  lastRow=row; 

}

} 


//*************************************************// 
/// Function to expand collapse row 
//*************************************************// 

function ExpandRow() {  
  var actualrowHeight = obj.getRowTemplate(actualRow).getStyle("height"); 
  expandedrow=true;

if( lastRow )
{

    if( actualrowHeight == defRowH || actualrowHeight == undefined )
    {
    
     obj.getRowTemplate(actualRow).setStyle("height", custRowH); 
         obj.setCellText("-",0,actualRow);
         obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
    }
    else
    {
       obj.getRowTemplate(actualRow).setStyle("height", defRowH ); 
       obj.setCellText("+",0,actualRow);
       obj.setScrollHeight( obj.getScrollHeight() - diffRowH );
    }

   
}  
   
 else         //first click in the grid 
 { 
   obj.getRowTemplate(actualRow).setStyle("height", custRowH); 
   obj.setCellText("-",0,actualRow);
   obj.setScrollHeight( obj.getScrollHeight() + diffRowH );   
 }   

    }   
     
//*********************************// 


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>
Ozgur
April 20,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.