1 Reply Latest reply on Sep 24, 2007 3:52 PM by Senor_Roberto

    Programmactic Access DataGrid Rows and Columns

    JehMus
      Hello,

      I am new to ActionScript. Can you tell me how can I access the rows and columns of a data grid?

      What I want to do is that when the application load, I will populate the datagrid with the Xml returned from the webservice. After that, webservice will be called periodically (using timer) and the information in the datagrid needs to be updated. The cells which are updated need to be highlighted.

      The datagrid actually contains the stock market data (symbol name and its other attributes). So once the datagrid has been populated on application creation, it contains all the symbols in the market. After that, only attributes of the symbols will change, like price, volume etc. What I want is that once the datagrid is populated, i can access the row by using the value of symbol code and then update the appropriate columns of that symbol. (Xml from next time will contain only symbols whose values change from last time).

      Below is the code that I have written so far.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      creationComplete="OnAppCreationComplete()" width="100%" height="100%">

      <mx:Script>
      <![CDATA[
      import mx.rpc.events.ResultEvent;

      private var count:uint = 0;
      private var messageFramXmlList:XMLList;
      private var marketSnapshotTimer:Timer = new Timer(1000);

      private function OnAppCreationComplete() : void
      {
      this.ajaxServiceInvokerProxy.addEventListener(ResultEvent.RESULT, this.OnWebServiceResultArrived);
      this.ajaxServiceInvokerProxy.InvokeService.send();

      this.marketSnapshotTimer.addEventListener(TimerEvent.TIMER, this.OnSnapshotTimerTick);
      this.marketSnapshotTimer.start();
      }

      private function OnWebServiceResultArrived(event:ResultEvent) : void
      {
      var marketSnapshotXml:XML = new XML(event.result);
      this.messageFramXmlList = marketSnapshotXml.child("MarketSnapshot").child("MessageFrameList")[0].child("MessageFram e");

      this.dgTopPosts.dataProvider = this.messageFramXmlList;
      this.btnCounter.label = this.count.toString();
      }

      private function OnSnapshotTimerTick(event:TimerEvent) : void
      {
      this.count++;
      this.ajaxServiceInvokerProxy.InvokeService.send();
      }
      ]]>
      </mx:Script>

      <mx:WebService id="ajaxServiceInvokerProxy"
      wsdl=" http://jehanzeb/ajaxserviceinvoker/ajaxserviceinvoker.asmx?wsdl"
      useProxy="false">
      <mx:operation name="InvokeService">
      <mx:request>
      <serviceWithComonentName>DetailedSnapshotComponent.MarketSnapshot@TADAWUL</serviceWithCom onentName>
      <parametersXml><![CDATA[ <Parameters/> ]]></parametersXml>
      </mx:request>
      </mx:operation>
      </mx:WebService>

      <mx:Panel x="10" y="10" width="100%" height="100%" layout="absolute" title="Market View">
      <mx:RichTextEditor id="txtMarketViewResult" x="10" y="10" width="612" height="194" />

      <mx:DataGrid x="10" y="223" id="dgTopPosts" width="100%" height="303">
      <mx:columns>
      <mx:DataGridColumn headerText="Symbol Code" dataField="SymbolID" />
      <mx:DataGridColumn headerText="Last Time" dataField="LastTime" />
      <mx:DataGridColumn headerText="Net Change" dataField="NetChange" width="75"
      />
      <mx:DataGridColumn headerText="Percent Change" dataField="PercentChange" width="75" />
      <mx:DataGridColumn headerText="Previous Closed" dataField="PreviousClosed" width="75"/>
      <mx:DataGridColumn headerText="Close" dataField="Close" width="75"/>
      <mx:DataGridColumn headerText="Direction" dataField="Direction" width="75"/>
      <mx:DataGridColumn headerText="BidPrice" dataField="BidPrice" width="75"/>
      <mx:DataGridColumn headerText="AskPrice" dataField="AskPrice" width="75"/>
      <mx:DataGridColumn headerText="BidVolume" dataField="BidVolume" width="75"/>
      <mx:DataGridColumn headerText="AskVolume" dataField="AskVolume" width="75"/>
      </mx:columns>
      </mx:DataGrid>
      <mx:LinkButton id="btnCounter" x="10" y="528" width="306" textAlign="left" label="" />
      </mx:Panel>
      </mx:Application>
        • 1. Re: Programmactic Access DataGrid Rows and Columns
          Senor_Roberto
          To achieve what you want, I would have two functions:

          * One populates the DataGrid for the first time, i.e. the inital load
          * The other does the 'update' on each interval, since there's logic required

          To update the DataGrid with only the rows that have changed, you're going to have to compare
          the incoming XML to the existing XML in the dataProvider of the DataGrid, then selectively update the dataProvider.

          You can use the getItemAt() and setItemAt() methods of the data provider to check each row against the incoming data. So, some example code:

          // This is the function which handles the result of your 'updated data only' webservice
          private function handleUpdateInvoke (event:ResultEvent) : void {

          var incoming:XML = new XML(event.result);
          var someList:XMLList = incoming.somePattern;

          // For each data provider item, check the key and if it matches
          // one of the incoming keys, update it at that index

          var numRows = this.dgTopPosts.dataProvider.length;
          var existingDataRow:*

          for (var i:Number = 0; i < numRows; i++) {

          existingDataRow = this.dgTopPosts.dataProvider.getItemAt(i);

          for each (var newDataRow:* in someList) {
          if (existingDataRow.SymbolID == newDataRow.SymbolID) {
          this.dgTopPosts.dataProvider.setItemAt(newDataRow, i);
          }
          }
          }

          }