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

    display a viewstack based on the selected item in a datagrid




      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: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"/>




      <!---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:Canvas id="GUM" label="GUM" width="100%" height="100%">
          <mx:Label x="19" y="51" text="GUM"/>



      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">
                         import mx.collections.ArrayCollection;
                         import mx.events.ListEvent;
                         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{
                                   case "Jan":
                                   case "Feb":
                                   case "Mar":
               <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 id="myCanvasFeb" label="Jan" width="100%" height="100%">
                         <mx:Label text="February" />
                    <mx:Canvas id="myCanvasMar" label="Jan" width="100%" height="100%">
                         <mx:Label text="March" />
          • 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