:: Forum >> Version 2 >>
Expanding / Collapsing a row ... Experiment-2.....
This sample demostrates (on doubleclick, and using the easy method) how to expand/collapse a row to show large texts (inside row-cells) inserting textareas (at cell-template level).
From now it is read-only, and I did not try yet if the use (insertion) of other objects is possible ( for edit or selection "could be tricky, because click-event capture).
Anyway , you can play with it and try what could be done.
Note: use doubleclick to e/c a row,
and this style line is needed to avoid centered-text (by default)
#Mygrid .aw-item-text { vertical-align: top; }
Hope this helps
Carlos
<html>
<head>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
</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 }
/* NEEDED FOR EXPANDING ROWS */
#Mygrid .aw-item-text { vertical-align: top; }
</style>
<script>
var myData = [
["MSFT","Microsoft Corporation aaaaaaaa ddddddddd ffffffffff gggggggggg hhhhhhhhhhh jjjjjjjj aaaaaaa", "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. rrrrrrr tttttttttt gggggggggggggg jjjjjjjjj llllllll tuuuuu yyyyyyy rrrrrrrrrr ", "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"],
["true", "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"],
["true", "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
///////////// V A R S ////////////////
var actualRow ;
var lastRow ;
var lastCol;
var defRowH = obj.getRowHeight(0); //get default row height size
var custRowH = 110; // define your custom row height
var diffRowH = custRowH - defRowH // calculates difference
//**************************************//
//creates textareas objects ( one per each column)
for (i=0;i<obj.getColumnCount();i++){
eval("var MyInp" + i + "= new AW.HTML.TEXTAREA");
eval("MyInp" + i + ".setId('MyInpId" + i + "')");
eval("MyInp" + i + ".setStyle('width', '100%')");
eval("MyInp" + i + ".setStyle('HEIGHT', custRowH-31 )");
eval("MyInp" + i + ".setStyle('BACKGROUND', 'lightyellow' )");
eval("MyInp" + i + ".setStyle('COLOR', 'BLUE' )");
eval("MyInp" + i + ".setStyle('FONT', 'MENU' )");
eval("MyInp" + i + ".setAttribute('readonly', 'readonly' )");
//defines vars to store last cell-templates
eval("var oldcell_" + i );
}
//**************************************//
obj.onCellDoubleClicked = function(event, column, row){
actualRow = row;
////if another row is expanded restore it to the original cells templates
if( obj.getRowTemplate(lastRow).getStyle("height") != defRowH) {
for (i=0;i<obj.getColumnCount();i++){
eval("obj.setCellTemplate(oldcell_" + i + ", i, lastRow)");
eval("obj.getCellTemplate( i, lastRow).refresh()") ;
}
}
//collapse last row & then expand current row
ExpandRow();
//replaces cell templates with new adding (inject) objects (textareas)
for (i=0;i<obj.getColumnCount();i++){
eval("MyInp" + i + ".setContent( 'text', obj.getCellText(i, row) )" ) ;
eval("oldcell_" + i + "=obj.getCellTemplate( i, row)");
eval("obj.getCellTemplate( i, row).setContent('box', obj.getCellText(i, row) + '</br>' + '</br>' + MyInp" + i + ".toString() )");
eval("obj.getCellTemplate(i, row).refresh()");
}
lastCol = column;
lastRow=row;
}
//*************************************************//
/// Function to expand collapse row
//*************************************************//
function ExpandRow() {
var actualrowHeight = obj.getRowTemplate(actualRow).getStyle("height");
if (lastRow) //not the first click in the grid
{
var lastrowHeight = obj.getRowTemplate(lastRow).getStyle("height");
if (lastRow != actualRow )
{
if(lastrowHeight == defRowH)
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}
else
{
obj.getRowTemplate(lastRow).setStyle("height", defRowH );
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
}
}
if (lastRow == actualRow ) {
if(actualrowHeight == defRowH)
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}
else
{
obj.getRowTemplate(actualRow).setStyle("height", defRowH );
obj.setScrollHeight( obj.getScrollHeight() - diffRowH );
}
}
}
else //first click in the grid
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}
}
//*********************************//
document.write(obj);
</script>
</body>
</html>
Carlos
Saturday, February 18, 2006
Uppps ! Sorry once more, It is buggy somewhere.
I have the feeling that is a Timeout issue, cause is only happening sometimes. ( but it's more than possible to be a .... in my code)
Fails on restoring previous Cell-Templates.
It can be checked by removing one of the '</br>'
Anyone can confirm ?? Any Ideas ??
Thanks
Carlos
Saturday, February 18, 2006
Hi Carlos,
Great job on this sample!!!
I think the bug is in the following test:
////if another row is expanded restore it to the original cells templates
if( obj.getRowTemplate(lastRow).getStyle("height") != defRowH) {
for (i=0;i<obj.getColumnCount();i++){
alert(eval("oldcell_"+i));
eval("obj.setCellTemplate(oldcell_" + i + ", i, lastRow)");
eval("obj.getCellTemplate( i, lastRow).refresh()") ;
}
}
You are restoring the old cell template if the user expands a different row. However, in the case where the user double clicks on the SAME row that is already expanded this code will not do a restore but will set the new cell template again. After that point it is impossible to restore it because the 'oldcell_' var has the wrong data.
Rob Francis
Saturday, February 18, 2006
Hmmm
lastRow=row; at the end of obj.onCellDoubleClicked function,
or I could not see the obvious thing?
Anyway it fails also by doubleclick'ing on different rows
Thanks
Carlos
Saturday, February 18, 2006
Hi Carlos,
There is a bug in there somewhere but I can't find it. I think it is in the AW code rather than yours. It isn't random or a timing issue. I can reproduce it at the same place everytime if I do the same steps. Also, it only happens after you click on a row the 2nd (or 3rd) time.
I believe it is a memory problem with either getCellTemplate or setCellTemplate. It might be a byref vs. byval type problem.
It is easier to debug if you set the row height higher and comment out the expandrow call
obj.setRowHeight(40);
Rob Francis
Saturday, February 18, 2006
Rob,
Thaks a lot for your testing,
There are more than one single bug in this sample, and you discover part of it, get/restore template blocks need some conditions before acting to avoid add a wrong or repeated content,
I notice that is working fine if you click on a row that was never been expanded before, so the line that creates the new template is failing on make a valid cell-template.
( in any case is a wrong one for future edit and maybe the unique solution is do it by setCellTemplate or creating a ImageText subclass)
I should investigate more about it before posting a partial solution "just valid for reading large texts", but will try to fix this case also.
Thks
Carlos
Saturday, February 18, 2006
Carlos,
I added the following condition to wrap the code in obj.onCellDoubleClicked
if (lastRow!=row) {
}
This helped with the repeated content but it doesn't fix the memory problem I think I was having.
Rob Francis
Saturday, February 18, 2006
I thik It need more (but only over the two --- for (i=0;i<obj.getColumnCou.....---. blocks
if( lastRow && obj.getRowTemplate(lastRow).getStyle("height") != defRowH) {
over the first block .. and this one over the second
if( lastRow != row || lastRow == row && obj.getRowTemplate(lastRow).getStyle("height") == defRowH) ){
and place ExpandRow(); below them...
But in my test does not either solve it totally cause i found some errors calculating height's ( place some alerts to test it)
Maybe you have more luck than me -- ;-)
Thanks
Carlos
Saturday, February 18, 2006
Hey Rob, don't try more !
I solved it in my last try !! ....but in the hard way :-( (repeating those blocks along ExpandRow function)
I'll post it tomorrow (need to sleep)
Carlos
Saturday, February 18, 2006
Thanks Carlos ... I'm glad you figured it out and I will wait for you to post.
I'm also getting very close on a variation of it injecting in the row template instead of the cell template. It will be based on the code you post today and will allow the injected object (ex. a grid) to span the entire row.
Rob Francis
Sunday, February 19, 2006
Nope, just an ilusion ( was tired yesterday)
Anyway as repeating blocks into a function is not a good practique :-)
, and trying to avoid my natutural tendence of conplicating the most siplest things, I created a resumed version ( without the need of a ExpandRow function, and also without playing with heights)
But get same results ( I am still believe that cell-template can't be hacked that way plus a Timeout issue).
So I will try with a Template.subclass
Maybe this version could be useful for future testings:
var lastExpandedRow = false;
obj.onCellDoubleClicked = function(event, column, row){
//actualRow = row;
////if another row is expanded restore it to the original cells templates
if( lastRow && lastExpandedRow == lastRow ) {
for (i=0;i<obj.getColumnCount();i++){
eval("obj.setCellTemplate(oldcell_" + i + ", i, lastRow)");
eval("obj.getCellTemplate( i, lastRow).refresh()") ;
}
//collapse last row
obj.getRowTemplate(lastRow).setStyle("height", defRowH);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
lastExpandedRow = false ;
}
//retrieves cell templates in vars
// and replaces cell templates adding (inject) objects (textareas)
if( lastExpandedRow == false ){
for (i=0;i<obj.getColumnCount();i++){
eval("MyInp" + i + ".setContent( 'text', obj.getCellText(i, row) )" ) ;
eval("oldcell_" + i + "=obj.getCellTemplate( i, row)");
eval("obj.getCellTemplate( i, row).setContent('box', obj.getCellText(i, row) + '</br>' + MyInp" + i + ".toString() )");
eval("obj.getCellTemplate(i, row).refresh()");
}
// expand current row
obj.getRowTemplate(row).setStyle("height", custRowH);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
lastExpandedRow = row ;
}
lastCol = column;
lastRow=row;
}
Carlos
Sunday, February 19, 2006
Hi Carlos,
Try this variation:
<html>
<head>
<link href="runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="runtime/lib/aw.js"></script>
</head>
<body>
<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; CURSOR: hand }
#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", "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>
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, 200); // width, height
///////////// V A R S ////////////////
var actualRow ;
var lastRow ;
var lastCol;
var oldrowtemplate;
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 grid2= new AW.UI.Grid;
grid2.setId('Mygrid2');
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(3);
grid2.setColumnCount(3);
grid2.setSelectorVisible(false);
grid2.setSelectorWidth(28);
grid2.setHeaderHeight(20);
grid2.setRowHeight(20);
grid2.setCellEditable(false); // disable editing
grid2.setSelectionMode("single-row");
grid2.setControlSize(400, 80); // width, height
//**************************************//
obj.onCellClicked = function(event, column, row){
if (column==0) {
actualRow = row;
obj.getRowTemplate(row).setContent('whatdoesthisdo', '<div style="position: absolute; left: 25; top: 20; width: 400; z-index: 1000000">'+grid2+'</div>');
if ( expandedrow==true) {
if (lastRow!=row) {
obj.getRowTemplate(lastRow).setContent('whatdoesthisdo', '');
}
}
ExpandRow();
lastRow=row;
obj.refresh();
}
}
//*************************************************//
/// Function to expand collapse row
//*************************************************//
function ExpandRow() {
var actualrowHeight = obj.getRowTemplate(actualRow).getStyle("height");
expandedrow=true;
if (lastRow) //not the first click in the grid
{
var lastrowHeight = obj.getRowTemplate(lastRow).getStyle("height");
if (lastRow != actualRow )
{
if(lastrowHeight == defRowH)
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}
else
{
obj.getRowTemplate(lastRow).setStyle("height", defRowH );
obj.setCellText("+",0,lastRow);
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
}
}
if (lastRow == actualRow ) {
if(actualrowHeight == defRowH)
{
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>
</body>
</html>
Click on the "+" in column 0 to expand and show a grid within the grid. The thing that might help with your example is instead of saving the template I am just injecting and later clearing the new text.
The only thing I don't understand is the first parameter to the setContent call. See 'whatdoesthisdo' in the code. The text I am inserting goes in an appropriate location so it is working anyway.
Rob Francis
Sunday, February 19, 2006
Great !!!
good Job!!
To fix the injected gid horiz.scroll bug try defining the width and height this way and puting the grid into the custom container subclass as in the other sample:
grid2.setStyle('width', 400 ); // width
grid2.setStyle('height', 80 ); // height
instead of:
//grid2.setControlSize(400, 80); // width, height
Note I removed obj.refresh(); and add (2) refresh for the rows only.
//***************//
var MyDDSpan = AW.HTML.SPAN.subclass();
MyDDSpan.create = function(){
var obj = this.prototype;
var _super = this.superclass.prototype;
obj.init = function(argument){
_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);
}
}
//***************************************//
var GridParameter = new MyDDSpan(grid2);
//**************************************//
obj.onCellClicked = function(event, column, row){
if (column==0) {
actualRow = row;
obj.getRowTemplate(row).setContent('whatdoesthisdo', '<div style="position: absolute; left: 25; top: 20; width: 400; z-index: 1000000">'+GridParameter+'</div>');
obj.getRowTemplate(row).refresh();
if ( expandedrow==true) {
if (lastRow!=row) {
obj.getRowTemplate(lastRow).setContent('whatdoesthisdo', '');
obj.getRowTemplate(lastRow).refresh();
}
}
ExpandRow();
lastRow=row;
}
}
Carlos
Sunday, February 19, 2006
No, the rows refresh are OK, but there is no need of creating the injected grid with a custom-subclass nor defining with & height in this way.
The horiz-scroll only is visible if the main-grid have it visible too, I tried with overflow: auto in the parent container div, but no luck.
Carlos
Sunday, February 19, 2006
Hi Carlos,
The horizontal scrollbar bug is strange. The scrollbar in the injected grid is visible when needed but will only be enabled if the parent has a horizontal scrollbar. Anyway, this isn't a big deal for me since my data will fit just fine without scrolling... or I will make sure the parent has a wide column at the end to force the scrollbar.
The only other thing I added was to setVirtualMode=false. This fixes a few minor rendering problems when scrolling and my data is small enough anyway.
I'm very happy with the result... it stays in position and even sorts as desired. Here is the full sample version I will use as a building block for my real app.
<html>
<head>
<link href="runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="runtime/lib/aw.js"></script>
</head>
<body>
<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; CURSOR: hand }
#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", "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>
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, 200); // width, height
obj.setVirtualMode(false);
///////////// V A R S ////////////////
var actualRow ;
var lastRow ;
var lastCol;
var oldrowtemplate;
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 grid2= new AW.UI.Grid;
grid2.setId('Mygrid2');
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(3);
grid2.setColumnCount(3);
grid2.setSelectorVisible(false);
grid2.setSelectorWidth(28);
grid2.setHeaderHeight(20);
grid2.setRowHeight(20);
grid2.setCellEditable(false); // disable editing
grid2.setSelectionMode("single-row");
grid2.setControlSize(400, 80); // width, height
//**************************************//
obj.onCellClicked = function(event, column, row){
if (column==0) {
actualRow = row;
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) //not the first click in the grid
{
var lastrowHeight = obj.getRowTemplate(lastRow).getStyle("height");
if (lastRow != actualRow )
{
if(lastrowHeight == defRowH)
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}
else
{
obj.getRowTemplate(lastRow).setStyle("height", defRowH );
obj.setCellText("+",0,lastRow);
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
}
}
if (lastRow == actualRow ) {
if(actualrowHeight == defRowH)
{
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>
</body>
</html>
Thanks for all your help on this Carlos :)
Rob Francis
Sunday, February 19, 2006
A few style lines need to be added (just to avoid : column resizing on Master-grid is applied to same column number in grid2)
#Mygrid .aw-column-1 {width: 100px; }
#Mygrid .aw-column-2 {width: 100px; }
#Mygrid .aw-column-3 {width: 100px; }
#Mygrid2 .aw-column-1 {width: 100px; }
#Mygrid2 .aw-column-2 {width: 100px; }
Thank you Rob
Carlos
Tuesday, February 21, 2006
I already found the "Experiment" solution playing with:
obj.getCellTemplate( i, lastRow).setContent('box') instead of setCellTemplate.
Also no more need of ExpandRow function.
Rob, you can try with a grid inside a cell, bu it is slower ( and have same horiz-scroll bug), the only advantage is that you can resize it's width within the column.
Did not try the other controls yet.
<html>
<head>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
</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 }
/* NEEDED FOR EXPANDING ROWS */
#Mygrid .aw-item-text { vertical-align: top; }
</style>
<script>
var myData = [
["MSFT","Microsoft Corporation aaaaaaaa ddddddddd ffffffffff gggggggggg hhhhhhhhhhh jjjjjjjj aaaaaaa", "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. rrrrrrr tttttttttt gggggggggggggg jjjjjjjjj llllllll tuuuuu yyyyyyy rrrrrrrrrr ", "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"],
["true", "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"],
["true", "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
///////////// V A R S ////////////////
var actualRow ;
var lastRow;
var lastCol;
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 lastExpandedRow =-1;
//**************************************//
//creates textareas objects ( one per each column)
for (i=0;i<obj.getColumnCount();i++){
eval("var MyInp" + i + "= new AW.HTML.TEXTAREA");
eval("MyInp" + i + ".setId('MyInpId" + i + "')");
eval("MyInp" + i + ".setStyle('width', '100%')");
eval("MyInp" + i + ".setStyle('HEIGHT', custRowH-31 )");
eval("MyInp" + i + ".setStyle('margin-top', '5px' )");
eval("MyInp" + i + ".setStyle('BACKGROUND', 'lightyellow' )");
eval("MyInp" + i + ".setStyle('COLOR', 'BLUE' )");
eval("MyInp" + i + ".setStyle('FONT', 'MENU' )");
eval("MyInp" + i + ".setAttribute('readonly', 'readonly' )");
//defines vars to store last cell-template box-cotent
eval("var oldcell_" + i );
}
obj.onCellDoubleClicked = function(event, column, row){
if( lastRow && lastExpandedRow == lastRow ) {
//restore templates (box-content)
for (i=0;i<obj.getColumnCount();i++){
eval("obj.getCellTemplate( i, lastRow).setContent('box', oldcell_" + i + ")");
eval("obj.getCellTemplate( i, lastRow).refresh()") ;
}
//collapse last row
obj.getRowTemplate(lastRow).setStyle("height", defRowH);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}
if( lastExpandedRow != row){
//retrieve cell templates (box-content) in vars and inject textareas
for (i=0;i<obj.getColumnCount();i++){
eval("MyInp" + i + ".setContent( 'text', obj.getCellText(i, row) )" ) ;
eval("oldcell_" + i + "=obj.getCellTemplate( i, row).getContent('box')");
eval("obj.getCellTemplate( i, row).setContent('box', obj.getCellText(i, row) + '</br>' + MyInp" + i + ".toString() )");
eval("obj.getCellTemplate(i, row).refresh()");
}
// expand current row
obj.getRowTemplate(row).setStyle("height", custRowH);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
lastExpandedRow = row;
}
else{lastExpandedRow = -1 }
lastRow=row;
}
document.write(obj);
</script>
</body>
</html>
Carlos
Tuesday, February 21, 2006
UUpps sorry, I promise I am trying to correct this bad habit but....
One small fix ( just a "-" instead of a "+" but only in this block)
//collapse last row
obj.getRowTemplate(lastRow).setStyle("height", defRowH);
obj.setScrollHeight( obj.getScrollHeight() - diffRowH );
Carlos
Tuesday, February 21, 2006
Looks great Carlos!
I zipped it up and emailed to Jim Hunter so he can put in on the demo page at
www.friendsofaw.com
Rob Francis
Tuesday, February 21, 2006
Demo is posted for those that want to see it in action.
Jim Hunter (www.FriendsOfAW.com)
Wednesday, February 22, 2006
This topic is archived.
Back to support forum
Forum search
