0 Replies Latest reply on Sep 9, 2009 11:40 PM by VIVEK JAIN YJA

    Populate Flex Grids during view state?

    VIVEK JAIN YJA

      Hi, I am very new to Flex. I am working on a Flex project where I want to populate xml data in the two grids during viewstate. In my project, I have two grid which resides in the two discinct view state named as "Category" and "Topic". For these two view state, i have two disctinct grids.

      I am successfully able to populate one grid that is "Category" state grid but when i change the state on button click event another grid does not populate with the data.

       

      Can anyone help me with this?

       

      Please have a look on the code below for better idea:


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="730" height="492" creationComplete="TopCategoryTopic()" currentState="HotCategory">
      <mx:states>
        <mx:State name="HotTopic">
            <mx:SetEventHandler target="{btnHotTopics}" name="click" handlerFunction="TopCategoryTopic">     
            </mx:SetEventHandler>
        <mx:SetProperty target="{btnHotTopics}" name="label" value="Top &quot;Hot&quot; Topic"/>
        <mx:RemoveChild target="{categoryGrid}"/>
        <mx:AddChild relativeTo="{canvas1}" position="lastChild">
          <mx:DataGrid id="topicGrid" x="10" y="27" width="601" height="263" color="#000000">   
          </mx:DataGrid>
        </mx:AddChild>
        <mx:AddChild relativeTo="{canvas1}" position="lastChild">
          <mx:Label x="10" y="10" text="Top &quot;Hot&quot; Topic" width="150" color="#000000" fontWeight="bold" fontFamily="Verdana" fontSize="11" id="label0"/>
        </mx:AddChild>
        </mx:State>
        <mx:State name="HotCategory">
          <mx:SetEventHandler target="{btnHotCategories}" name="click" handlerFunction="TopCategoryTopic">     
            </mx:SetEventHandler>
            <mx:SetProperty target="{btnHotCategories}" name="label" value="Top &quot;Hot&quot; Categories"/>
        <mx:RemoveChild target="{categoryGrid}"/>
        <mx:AddChild relativeTo="{canvas1}" position="lastChild">
          <mx:DataGrid id="categoryGrid"  x="10" y="27" width="601" height="263" color="#000000">   
          </mx:DataGrid>
        </mx:AddChild>
        <mx:AddChild relativeTo="{canvas1}" position="lastChild">
          <mx:Label x="10" y="10" text="Top &quot;Hot&quot; Category" width="159" color="#000000" fontWeight="bold" fontFamily="Verdana" fontSize="11" id="label2"/>
        </mx:AddChild>
        </mx:State>
      </mx:states>
      <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        width="730" height="492" headerHeight="20"
            showCloseButton="true" borderColor="#000000"
        layout="absolute" fontSize="12" verticalScrollPolicy="off"
        horizontalScrollPolicy="off" title="Customer Success &amp; Strategy - Q4 Hot Topics/Categories"
        themeColor="#0E4463" horizontalCenter="0"
        verticalCenter="0" id="CSSTopPresenter" cornerRadius="0" alpha="1.0"
        backgroundColor="#FFFFFF" borderThickness="0" close="CloseWindow()"
        color="#FFFFFF" borderThicknessLeft="3" borderThicknessRight="3" borderThicknessBottom="3">
          <mx:Script>
              <![CDATA[
                  import mx.controls.dataGridClasses.DataGridColumn;
            import mx.collections.XMLListCollection;

       

              import mx.managers.PopUpManager;
                  import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.http.HTTPService;
        import mx.events.FlexEvent;
        import mx.controls.Alert;
       
        import flash.events.MouseEvent;
             
                  [Bindable]
                  private var _xmlData:XMLList;
                 
                  private function TopCategoryTopic():void
                  {
                      var httpService:HTTPService = new HTTPService();
                  httpService.url = "http://ri/co.UI/CtSS/Rsources/Hgory.aspx?Month=January&Year=2009";
                  httpService.resultFormat = "e4x";
          httpService.addEventListener(ResultEvent.RESULT, onResultHttpService);
          httpService.send();
                  }
                 
                  //funtion to receive Http Service Response as XML Document         
                private function onResultHttpService(e:ResultEvent):void
        {
          //var xmlData:XMLList = e.result.CategoryTopic;
          var category:XMLList = e.result.categories;
          var topic:XMLList= e.result.topics;
           
          if(currentState=="HotCategory")
          {
              categoryGrid.dataProvider = category;
             
              for each (var node:XML in category[0].children())
                {
                  addDataGridColumn1(node.name());
              }
          }
          else if(currentState=="HotTopic")
          {
            topicGrid.dataProvider = topic;
           
            for each (var node1:XML in topic[0].children())
              {
              addDataGridColumn2(node1.name());
            }
                } 
        }
       
          //function to add Categories column dynamically
        private function addDataGridColumn1(dataField:String):void
        {   
          var dgc:DataGridColumn=new DataGridColumn(dataField);
             
          var cols:Array=categoryGrid.columns;
          cols.push(dgc);
          categoryGrid.columns=cols;
          categoryGrid.validateNow(); 
        } 
               
                  //function to add Topic column dynamically
        private function addDataGridColumn2(dataField:String):void
        {
          var dgc:DataGridColumn=new DataGridColumn(dataField);
             
          var cols:Array=topicGrid.columns;
          cols.push(dgc);
          topicGrid.columns=cols;
          topicGrid.validateNow(); 
        } 
       
            //funtion to remove grid window
        private function CloseWindow():void
        {
          PopUpManager.removePopUp(this);
        } 
       
          ]]>
          </mx:Script>
         
          <mx:Button id="btnHotCategories" label="Top &quot;Hot&quot; Categories" width="173" height="37" borderColor="#2673A9" cornerRadius="6" labelPlacement="left" color="#000000" click="currentState='HotCategory'" x="45" y="23" fillAlphas="[1.0, 1.0]" fillColors="[#4D8F8D, #CCD3DE]"/>
          <mx:Button id="btnHotTopics" label="Top &quot;Hot&quot; Topic"  width="172" height="38" cornerRadius="6" borderColor="#000000"  color="#000000" click="currentState='HotTopic'"  x="46" y="78" fillAlphas="[1.0, 1.0]" fillColors="[#4D8F8D, #CCD3DE]"/>
         
          <mx:Canvas width="621" height="302" borderStyle="solid" borderColor="#0092F9" y="155" x="46" cornerRadius="9"  alpha="0.61" backgroundColor="#0092f9" id="canvas1">
             
          </mx:Canvas> 
         
          <mx:Image x="294" y="0" width="373" height="147" source="assets/CategoryTopic.gif"/>

       

      </mx:TitleWindow>
      </mx:Canvas>

       

      Thanks in advance.

      Vivek Jain

      Software Engineer