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>
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>
Alex from Sydney
December 16,