#Mygrid .aw-item-text { vertical-align: top; }
<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>
////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()") ;
}
}
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;
}
<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>
//***************//
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;
}
}
<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>
<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>
//collapse last row
obj.getRowTemplate(lastRow).setStyle("height", defRowH);
obj.setScrollHeight( obj.getScrollHeight() - diffRowH );
This topic is archived.