2 Replies Latest reply on May 21, 2009 1:48 AM by robegv

    display a viewstack based on the selected item in a datagrid

    robegv

      Hi

       

      I am bit new to flex although i have been using CF for a while but could do with what I hope is a simple answer to asimple question...

       

      I have a datagrid which displays a number of columns one of which is "type" I want to be able to display a viewstack child based on the "type" selected in in the data grid. I have tried a number of ways all of which fail, annoyingly.

       

      the latest incarnation of the code is as follows

       

       

      //script function part

       

      private function dataGridChangeHandler(event:Event):void
         {
         // Get selected datagrid row item
         var Type:String = event.target.selectedIndex;
        
         // Set the view stack index
         this.pagesStack.id = Type;
         }
        
        

       

      <!--datagrid part-->

       

      <mx:DataGrid id="EpisodeDatagrid"  selectable="true" draggableColumns="true" change="this.dataGridChangeHandler"  variableRowHeight="true" editable="false" height="100%" textAlign="center" width="100%">
                <mx:columns>
                 <mx:DataGridColumn id="startdate" dataField="EpisodeStartdate" headerText="Start Date" labelFunction="dateLabelFunction" headerWordWrap="true"/>
                 <mx:DataGridColumn id="enddate" dataField="EpisodeEnddate" headerText="End Date"  labelFunction="dateLabelFunction" headerWordWrap="true"/>
                 <mx:DataGridColumn id="Type" dataField="Episodetype" headerText="Type"  headerWordWrap="true" />
                 <mx:DataGridColumn id="Status" dataField="EpisodeStatus" headerText="Status" headerWordWrap="true"  itemRenderer="active"/>

                </mx:columns>
              
              </mx:DataGrid>

       

       

      <!---Viewstack Part--->

       

      <mx:HBox width="100%" height="100%">
        
        
        
         <mx:ViewStack id="pagesStack" width="555" height="202">
        
         <mx:Canvas   id="DIP" label="DIP">
          <mx:Panel x="10" y="10" width="250" height="200" layout="absolute">

          <mx:Label x="19" y="51" text="DIP"/>
          </mx:Panel>
         </mx:Canvas>
        
         <mx:Canvas id="GUM" label="GUM" width="100%" height="100%">
          <mx:Label x="19" y="51" text="GUM"/>
         </mx:Canvas>
        
         </mx:ViewStack>
        
         </mx:HBox>

       

       

      help would be much appreciated (sample code would be more appreciated:)

        • 1. Re: display a viewstack based on the selected item in a datagrid
          Michael Borbor Level 4
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
               <mx:Script>
                    <![CDATA[
                         import mx.collections.ArrayCollection;
                         import mx.events.ListEvent;
                         [Bindable]
                         public var expenses:ArrayCollection = new ArrayCollection([
                              {Month:"Jan", Profit:2000, Expenses:120, Amount:45},
                              {Month:"Feb", Profit:1000, Expenses:200, Amount:60},
                              {Month:"Mar", Profit:1500, Expenses:500, Amount:30}
                              ]);
          
                         private function myChangeHandler(e:ListEvent):void{
                              switch(e.currentTarget.selectedItem.Month){
                                   case "Jan":
                                        myVS.selectedChild=myCanvasJan;
                                        break;
                                   case "Feb":
                                        myVS.selectedChild=myCanvasFeb;
                                        break;
                                   case "Mar":
                                        myVS.selectedChild=myCanvasMar;
                                        break;
                              }
          
                         }
                    ]]>
               </mx:Script>
               <mx:DataGrid dataProvider="{expenses}" change="myChangeHandler(event)" />
               <mx:ViewStack x="181" y="236" id="myVS" width="200" height="200">
                    <mx:Canvas id="myCanvasJan" label="Jan" width="100%" height="100%">
                         <mx:Label text="January" />
                    </mx:Canvas>
                    <mx:Canvas id="myCanvasFeb" label="Jan" width="100%" height="100%">
                         <mx:Label text="February" />
                    </mx:Canvas>
                    <mx:Canvas id="myCanvasMar" label="Jan" width="100%" height="100%">
                         <mx:Label text="March" />
                    </mx:Canvas>
               </mx:ViewStack>
          
          </mx:Application>
          
          
          • 2. Re: display a viewstack based on the selected item in a datagrid
            robegv Level 1

            Hi Michael,

             

            That works a treat i have never used the "Switch" or the "break" statements before - i see i need a little (or alot!) more reading. I just need to arrange this a little to fit my app but that should be doable.

             

            Thanks again

             

            Message was edited by: robegv