:: Forum >>

can a grid cell drop down a textarea?

we have a view only grid that displays user data. in one of the columns the user has 2000 chars and complains that he can't see the full text in the grid.

is there any way to drop down a (read-only) text area when click on the cell or something? i searched the forum and can't see any working example.

btw we tried using tooltips and its not working well
mango
Wednesday, October 22, 2008
ok so i search the forum and found some code that basically works BUT the getTop and getLeft functions are not returning values correctly on IE6. i have made this example using grid code in quickref. the grid was pushed down and need to scroll

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ActiveWidgets Examples</title>

<!-- fix box model in firefox/safari/opera -->
<style type="text/css">
.aw-quirks * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

body {font: 12px Tahoma}
</style>

<!-- include links to the script and stylesheet files -->
<link href="/ActiveWidgets2/runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="/ActiveWidgets2/runtime/lib/aw.js"></script>
</head>
<body>


<TABLE WIDTH="622" BORDER="1">
<TR height=500>
<td>
BOX
</TD>
</TR>
</TABLE>

<style type="text/css">

#myGrid { width: 400px}

#myGrid .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}

/* box model fix for strict doctypes, safari */
.aw-strict #myGrid .aw-grid-row {padding-bottom: 3px;}

#myGrid .aw-alternate-even {background: #fff;}
#myGrid .aw-alternate-odd {background: #eee;}

#myGrid .aw-grid-headers {color: blue}
#myGrid .aw-grid-headers .aw-column-1 {font-weight: bold}


#myGrid .aw-mouseover-selector {background: green;}
#myGrid .aw-mousedown-selector {background: yellow;}

</style>

<script type="text/javascript">

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 myRow = ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"]

var myHeaders = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

</script>

<script type="text/javascript">

var obj = new AW.UI.Grid;

obj.setId("myGrid");

obj.setCellText(myData); // 2-dimensional js array
obj.setHeaderText(myHeaders); // js array (see top of this page)

obj.setColumnCount(5);
obj.setRowCount(20);
obj.setCellEditable(false);

var lastcol;
var lastrow;
var isanyddvisible = false;
var lastTopPos;


var objtextarea = new AW.HTML.TEXTAREA;
objtextarea.setStyle("width", '300');
objtextarea.setStyle("height", "100");
objtextarea.setStyle("POSITION", "ABSOLUTE");
objtextarea.setStyle("Z-INDEX", "1000000000");
objtextarea.setStyle("background", "lightyellow");

objtextarea.setStyle("display", "none") ;
document.write(objtextarea);


obj.setVirtualMode(false);


/////// 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 ) {
/// hide drop-down object
objtextarea.setStyle("display", "none") ;
isanyddvisible = false;
obj.setScrollTop( lastTopPos );
}
}

obj.onCellDoubleClicked = function(event, column, row){
/// retaint scroll pos
lastTopPos = obj.getScrollTop();

isanyddvisible = true;

objtextarea.setContent('value', '');
objtextarea.setContent("text", obj.getCellText( column, row) );
objtextarea.refresh();

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

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

objtextarea.setStyle("display", "block") ;
lastcol=column;
lastrow=row;
}
document.write(obj);
</script>

</body>
</html>
mango
Wednesday, October 22, 2008

else{
objtextarea.setStyle("left", AW.getLeft(el) + document.body.scrollLeft - 2 );
objtextarea.setStyle("top", AW.getTop(el) + document.body.scrollTop + el.offsetHeight - 3 );
}
Thursday, October 23, 2008

This topic is archived.


Back to support forum

Forum search