2 Replies Latest reply on Sep 9, 2009 10:25 PM by Nis_adobe

    Dynamically determine controls and dispaly them

    Nis_adobe

      Hi,

       

      I would like to achieve following:

       

      When I select an item from Datagrid, I would like to display a specific number of textinputs.

       

      For Example, Item1 needs two textinputs, item 2 needs three, item 3 nees zero.

       

      I can store the number of textinput details in XML file from where datagrid loads data,

       

      Can I achieve it?

       

      Nishit

        • 1. Re: Dynamically determine controls and dispaly them
          Andrew Rosewarn Level 3

          You certainly can.

           

          In your XML add a node to determine the number of textfields you want.  Then when you have populated the datagrid, listen for the item click event.  When it clicked get the selectedItem from the gird and get the value from the node you were holding the amount of texts you wanted.  The loop over this number and create new textInputs and add them to the display list.

           

          Heres a quick example

           

          <mx:Application

              xmlns:mx="http://www.adobe.com/2006/mxml"

              xmlns:view="com.view.*"

              layout="absolute" width="100%" height="100%" xmlns:ns1="*">

           

          <mx:Script>

          <![CDATA[

          import mx.controls.TextInput;

           

          private var xml:XML =

          <root>

                   <data>

               <row>

                      <item>Item 1</item>

                      <texts>2</texts>

                    </row>

                    <row>

                      <item>Item 2</item>

                      <texts>3</texts>

                    </row>

                    <row>

                      <item>Item 3</item>

                      <texts>0</texts>

                    </row>

                </data>

                 </root>;

           

                    [Bindable]

                    private var myData:XMLList = xml.data.row as XMLList;

           

                    private function handleItemClick():void {

                    // Get no of texts to show from datagrid column

                    var noOfTexts:int = dg.selectedItem.texts;

                    // remove any existing textfields

                    textContainer.removeAllChildren();

                   

                    // Loop over noOf texts and create new textfields and add to container

                    for (var i:int = 0; i<noOfTexts; i++) {

                    var textInput:TextInput = new TextInput();

                    textContainer.addChild(textInput);

                    }

                    }

          ]]>

          </mx:Script>

          <mx:DataGrid id="dg" x="34" y="39" dataProvider="{myData}" itemClick="handleItemClick()">

          <mx:columns>

          <mx:DataGridColumn headerText="Item" dataField="item"/>

          <mx:DataGridColumn headerText="No Of Texts" dataField="texts"/>

          </mx:columns>

          </mx:DataGrid>

          <mx:VBox x="244" y="39" height="183" width="198" id="textContainer">

          </mx:VBox>

          </mx:Application>

           

          Hope that helps

           

          Andrew

          • 2. Re: Dynamically determine controls and dispaly them
            Nis_adobe Level 1

            Thanks Andrew.

             

            That was helpful. Now could you also help me read the value from that textinputs?

             

            For Example, I have added three textimputs dynamically and user has entered some values in those textinputs. How can I read the values from those textinputs dynamically?

             

            Thanks again for your help

            Nishit