Populate Flex Grids during view state?

Question

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

Answer 1

I simplified the problem to it's essence and came up with this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
    creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var lProvider:ArrayCollection;
            private function init():void
                var la:Array = [{label: "Conference", checked: true},
                                {label: "Tickets", checked: false}];
                lProvider = new ArrayCollection(la);
        ]]>
    </mx:Script>
    <mx:List id="cList" width="200" dataProvider="{lProvider}" itemClick="lProvider.refresh()">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox width="100%">
                    <mx:CheckBox selected="{data.checked}" click="data.checked = event.target.selected"/>
                    <mx:Label text="{data.label}"/>
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:List>
    <mx:VBox width="600">
        <mx:Panel title="Conference component" width="100%" height="200"
                visible="{lProvider.getItemAt(0).checked}"
                includeInLayout="{lProvider.getItemAt(0).checked}"/>
        <mx:Panel title="Ticket component" width="100%" height="200"
                visible="{lProvider.getItemAt(1).checked}"
                includeInLayout="{lProvider.getItemAt(1).checked}"/>
    </mx:VBox>
</mx:Application>
Does this help?
Dany