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>