GRID with drag body scroll and fixed column

hi everyone,
The only thing I can say bad about this project is the documentation is not as complete as I could expect otherwise everything else is perfect.
here is a sample script I put together to mimic the eTrade Pro Grid...
Please add your thoughts and improvements.

<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
#myGrid { width: 400px; margin: 0px; }

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

#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}

#myGrid .aw-cells-selected {background: default; color: black;}

#myGrid .aw-column-0 {width: 50px; border-right: 1px solid #848484; cursor:default;}
#myGrid .aw-column-1 {width: 150px; border-right: 1px solid #C6C6C6; cursor:hand; }
#myGrid .aw-column-2 {width: 100px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-3 {width: 100px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-4 {width: 100px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }

#myGrid .aw-grid-headers {font-weight: bold; cursor:pointer;}
</style>

<script>

/********************************************************************
/////////////////////////////////////////////////////////////////////

D A T A S O U R C E S

/////////////////////////////////////////////////////////////////////
********************************************************************/

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>
var obj = new AW.Grid.Extended;
obj.setId("myGrid"); // necessary for CSS rules
// obj.setFixedLeft(2); // number of fixed columns on the left side
// obj.setFixedRight(1); // number of fixed columns on the right side
obj.setVirtualMode(false); // disable virtual mode
obj.setCellText(myData); // 2-dimensional js array
// obj.getCellTemplate().setStyle("color", "red"); // all columns
// obj.getCellTemplate(1).setStyle("color", "green"); // column-1
// obj.getCellTemplate(2, 3).setStyle("color", "blue"); // column-2, row-3
obj.setCellEditable(false); // disable editing
obj.setCellEditable(true , 0);
obj.setHeaderCount(1);
obj.setHeaderText(myHeaders); // js array (see top of this page)
// obj.setHeaderHeight(30);
// obj.setHeaderHeight(15, 1); // only second header row
obj.setColumnCount(5);
// obj.setColumnIndices([0, 2, 3, 4]); // hide column 1
// obj.setColumnIndices([4, 3, 2, 1, 0]); // reverse order
// obj.setColumnWidth(60, 0); // set width of the column-0 to 60px
obj.setRowCount(20);
// obj.setRowIndices([0,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]); // hide row 1
// obj.setRowIndices([19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0]); // reverse order
obj.setSelectorVisible(false);
// obj.setSelectionMode("single-cell"); // default
// obj.setSelectionMode("single-row");
// obj.setControlSize(500, 300); // width, height
// obj.setControlPosition(100, 50); // left, top - adds 'position:absolute'
obj.setVirtualMode(false); // disable virtual mode

document.write(obj);

obj.onCellClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " clicked"};
obj.onCellDoubleClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " double clicked"};
obj.onCellMouseOver = function(event, column, row){
if (window.Event){
ddX = event.pageX;
ddY = event.pageY;
}else{
ddX = event.clientX;
ddY = event.clientY;
}
window.status = "Cell " + column + "." + row + " mouse over x:" + ddX +" y:"+ ddY;
};
obj.onCellMouseOut = function(event, column, row){ window.status = "Cell " + column + "." + row + " mouse out"};
obj.onCurrentColumnChanged = function(index){ window.status = "current column: " + index };

obj.onCellMouseDown = function(event, column, row){ if (column>0) dragstart(event) };
obj.onCellMouseUp = function(event, column, row){ dragstop() };
</script>

<script>
var dragapproved=false
var offsetx, offsety, tmpx, tmpy, maxx, maxy

function dragstart(e){
dragapproved=true;
offsetx=event.clientX;
offsety=event.clientY;
tmpx=obj.getScrollLeft();
tmpy=obj.getScrollTop();
maxx=obj.getScrollWidth() - document.getElementById("myGrid").offsetWidth + 21;
maxy=obj.getScrollHeight() - document.getElementById("myGrid").offsetHeight + 21;
if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=dragdrop
}

function dragdrop(e){
if (dragapproved&&event.button==1){
x=tmpx+offsetx-event.clientX
y=tmpy+offsety-event.clientY
}
if (x<0)x=0;
if (y<0)y=0;
if (x>maxx)x=maxx;
if (y>maxy)y=maxy;
obj.setScrollLeft(x);
obj.setScrollTop(y);
}

function dragstop(){
dragapproved=false;
if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=null;
}
</script>
</body>
</html>

Hey! you invented the bigest diagonal-scrollbar ;-)
Great...Thanks a lot for posting

Thanks Carlos,
I am working on refining this grid to use yahoo data and create a dynamic watchlist... anyhelp on refreshing would be appreciated.
Thanks

This is excellent. At first I didn't know what was different with this grid as your post didn't say what it was that you did, but I figured it out. For others that are in the dark as to what the eTrade Pro Grid does, you can click directly on the grid and scroll it around, just like you can with the Google Map. This is something I think should be added to the base grid!

It worked great for me under IE but did not work under FF 1.5 or any other browser I tried. Don't let that discourage you, it's still a great start.

Sorry I have only written this for IE you will need to play with the page size functions in the drag functions.

See this post for a completed version of this script.

http://activewidgets.com/javascript.forum.10293.5/adding-new-row-from-within.html

from where to start coding this project in html,java-script

Forum search