ActiveWidgets • Grid Refresh Example - Yahoo Stock Market

More information on this topic is available in the documentation section: /aw.ui.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>
Grid Refresh Example - Yahoo Stock Market - how do I refresh part of the grid

Documentation:

Forum search
