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)
Hope this helps
Carlos
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
February 18,