:: Forum >> Version 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
Wednesday, February 15, 2006
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)
Wednesday, February 15, 2006
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
Wednesday, February 15, 2006
Rob Francis
Thursday, February 16, 2006
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
Thursday, February 16, 2006
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
Thursday, February 16, 2006
Also, for my case the value selection will NOT replace the main cell text.
Rob Francis
Thursday, February 16, 2006
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
Thursday, February 16, 2006
Oh, just 1 row at a time for my case.
Rob Francis
Thursday, February 16, 2006
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
Thursday, February 16, 2006
Wow Carlos ... this is a great example. Many thanks.
Jim ... this should be added as a demo on FriendsOfAW.com
Rob Francis
Thursday, February 16, 2006
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
Friday, February 17, 2006
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
Friday, February 17, 2006
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
Friday, February 17, 2006
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
Friday, February 17, 2006
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
Saturday, February 18, 2006
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
Saturday, April 1, 2006
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, "<");
win.document.write(newresults );
}
</script>
<input type="button" value="tikla" onclick="newWin()">
<DIV id="deneme"></DIV>
</body>
</html>
Ozgur
Thursday, April 20, 2006
This topic is archived.
Back to support forum
Forum search
