Grid Refresh Example - Yahoo Stock Market - how do I refresh part of the grid
hi everyone,
This is a work in progress using this fabulous grid.
My question is:
How can I refresh only part of the grid. ie only the columns that are not fixed...so that I can double click on the code column and change the code to a new one and have it bring back that codes data. (like a watch list).
I thought I might share it with everyone... Any help in enhancing or rewriting the code in a better way is much appreciated. Also looking to be able to add and delete rows to this grid.
Thanks
Alex H
This is a work in progress using this fabulous grid.
My question is:
How can I refresh only part of the grid. ie only the columns that are not fixed...so that I can double click on the code column and change the code to a new one and have it bring back that codes data. (like a watch list).
I thought I might share it with everyone... Any help in enhancing or rewriting the code in a better way is much appreciated. Also looking to be able to add and delete rows to this grid.
Thanks
Alex H
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
#myGrid { width: 700px; 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: 110px; border-right: 1px solid #C6C6C6; cursor:hand; }
#myGrid .aw-column-2 {width: 50px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-3 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-4 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-5 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-6 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-7 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-8 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-9 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-10 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-column-11 {width: 70px; border-right: 1px solid #C6C6C6; cursor:hand; text-align: right; }
#myGrid .aw-grid-headers {font-weight: bold; cursor:pointer;}
</style>
<script>
new AW.CSV.Table;
AW.CSV.Table.prototype.response = function(text){
this._rows = text.split(/\r*\n/);
// this._data = []; // missing in beta3
if (this.$owner) {
// this.$owner.clearScrollModel(); // missing in beta3
this.$owner.clearSelectionModel();
this.$owner.clearSortModel();
this.$owner.clearRowModel();
this.$owner.setRowCount(this.getCount());
this.$owner.refresh();
}
};
var myURL = "http://au.finance.yahoo.com/d/quotes.csv?s=";
var myCODES = "BHP.AX,TLS.AX,CBA.AX,NAB.AX,WBC.AX,AXA.AX,RIO.AX";
var myCOLS = "&f=snc6l1b3b2ohgt1d1&e=.csv";
var myHeaders = ["Code", "Name", "+/-", "Last", "Bid", "Ask", "Open", "High", "Low", "Time", "Date"];
var myData = [];
var myOldData = [];
var table = new AW.CSV.Table;
var obj = new AW.Grid.Extended;
</script>
<script>
obj.setId("myGrid"); // necessary for CSS rules
obj.setCellEditable(false); // disable editing
obj.setCellEditable(true , 0); // Enable editing on column 0
obj.setHeaderCount(1);
obj.setSelectorVisible(false);
// 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.onCellSelectedChanging = function(event){ alert('test2') };
//obj.onCellSelectedChanged = function(event){ alert('test3') };
obj.onCellDataChanged = function(value){ alert(value) };
obj.onCellClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " clicked"};
obj.onCellDoubleClicked = function(event, column, row){ obj.setCellText("test",column,row); };
obj.onCellMouseDown = function(event, column, row){ if (column>0) dragstart(event) };
obj.onCellMouseUp = function(event, column, row){ dragstop() };
obj.onControlMouseUp = function(event){ dragstop() };
</script>
<script>
function reload(){
var now = new Date();
table.setURL(myURL+myCODES+myCOLS);
var defaultResponse = table.response;
table.response = function(data){
defaultResponse.call(table, data);
Datalen=table.getCount();
for(var x=0; x< Datalen; x++) {
var v00 = table.getText( 0, x);
var v01 = table.getText( 1, x);
var v02 = table.getText( 2, x);
var v03 = table.getText( 3, x);
if (myOldData[x]) {
if (v03 > myOldData[x][3]) obj.getCellTemplate(3, x).setStyle("background", "green");
if (v03 < myOldData[x][3]) obj.getCellTemplate(3, x).setStyle("background", "red");
}
var v04 = table.getText( 4, x);
var v05 = table.getText( 5, x);
var v06 = table.getText( 6, x);
var v07 = table.getText( 7, x);
var v08 = table.getText( 8, x);
var v09 = table.getText( 9, x);
var v10 = table.getText(10, x);
var v11 = table.getText(11, x);
myData.push([v00,v01,v02,v03,v04,v05,v06,v07,v08,v09,v10,v11]);
}
obj.setRowCount(Datalen);
obj.setColumnCount(myHeaders.length);
obj.setCellText(myData);
obj.setHeaderText(myHeaders);
}
table.request();
obj.refresh();
var now1 = new Date();
var load = (now1-now) / 1000;
window.status = "Live Response Time: " + load + " secs";
setTimeout('reload()', 1000);
myOldData = myData;
myData = [];
table._data = [];
}
setTimeout('reload()', 1000);
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>
<p></p>
<input type="button" value="refresh" onclick="reload()"/>
</body>
</html>Alex from Sydney
December 19,