3.0.5

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

<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,
Alex, I see a different problem/solution here. In beta3 CSV model does not save edited text yet. To enable this you should implement setText method in your table model (for the first column) and then maybe you could use the CSV model without transferring data into array (?)
Alex (ActiveWidgets)
December 19,
Hey Alex-from-Sydney,

My suggesting for only updating some columns for a grid would be to create an uber-model that combines two sub-models. One sub-model would be the fixed columns, the other sub-model would be the un-fixed columns. The uber-model would need control which sub-model is used when getData() is called. Clearly, you would need to use some sort of keying to ensure that the two models are correctly aligned.

Just a thought. Others probably have better ones.
LostInSpace
December 19,


Does this solution work on AW.XML.Table as well if so how?

RitaRose
February 21,

This topic is archived.

See also:


Back to support forum