2 Replies Latest reply on Sep 22, 2009 1:14 AM by David_F57

    Datagrid and dropdown list in  a column

    slavix_ Level 1

      Hello,

      I am trying the new Flex SDK 4 and want to put together a datagrid with a collumn displaying a dropdown list.

      Anyone has an example? please give me a link to an example.

       

      thanks,

      Slava

        • 1. Re: Datagrid and dropdown list in  a column
          SrinivasAnnam Adobe Employee

          Hi,

           

              Here is a small sample which has ComboBox as itemRenderer defined inline in MXML.

           

              <fx:Declarations>

                    <fx:Array id="empArray">

                         <fx:Object first="A1" last="B1" status="Pass"/>

                         <fx:Object first="A2" last="B2" status="Fail"/>

                    </fx:Array>

               </fx:Declarations>

           

               <mx:DataGrid dataProvider="{empArray}" x="35" y="77">

                    <mx:columns>

                         <mx:DataGridColumn headerText="First Name" dataField="first"/>

                         <mx:DataGridColumn headerText="Last Name" dataField="last"/>

                         <mx:DataGridColumn headerText="Status" dataField="status">

                              <mx:itemRenderer>

                                   <fx:Component>

                                        <mx:ComboBox dataProvider="['Pass','Fail']"/>

                                   </fx:Component>

                              </mx:itemRenderer>

                         </mx:DataGridColumn>

                    </mx:columns>

               </mx:DataGrid>

           

          Regards

          Srinivas Annam

          http://srinivasannam.wordpress.com

          • 2. Re: Datagrid and dropdown list in  a column
            David_F57 Level 5

            Hi Slava,

            the example above is the nice way to do it and looks great if you skin the dropdownbox, if you want a more conventional grid display that only shows the dropdown box when the cell is selected you need to use a different method that doesn't use an item renderer.

             

            below is code that will achieve this, (I actually prefer the previous example but the beuaty of flex is you have choices)

             

            the main application

            <?xml version="1.0" encoding="utf-8"?>

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                xmlns:s="library://ns.adobe.com/flex/spark"

                                                xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="initApp()">

                 <fx:Script>

                      <![CDATA[

                           import mx.collections.ArrayCollection;

                           

                           [Bindable] private var arr1:ArrayCollection = new ArrayCollection();

                           [Bindable] private var arr2:ArrayCollection = new ArrayCollection();

                           

                           private function initApp(): void

                           {

                                arr1.addItem({id:1,desc:"Apple",qty:"one"});

                                arr1.addItem({id:2,desc:"Banana",qty:"two"});

                                arr1.addItem({id:3,desc:"Orange",qty:"three"});

                                arr1.addItem({id:4,desc:"Peach",qty:"four"});

                                arr1.addItem({id:5,desc:"Pear",qty:"two"});

                           }

                           

                      ]]>

                 </fx:Script>

                 

                 <mx:DataGrid x="28" y="35" height="465" dataProvider="{arr1}" editable="true">

                      <mx:columns>

                           <mx:DataGridColumn headerText="item" dataField="id" editable="false"/>

                           <mx:DataGridColumn headerText="description" dataField="desc" editable="false"/>

                           <mx:DataGridColumn headerText="quantity" dataField="qty" itemEditor="DropEditor" editorDataField="caseValue"/>

                      </mx:columns>

                 </mx:DataGrid>

            </s:Application>

            the cell editor (DropEditor.mxml)
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
                                verticalScrollPolicy="off" horizontalScrollPolicy="off">
                 <mx:Script>
                      <![CDATA[
                           import mx.collections.ArrayCollection;
                           import mx.events.ListEvent;
                           
                           [Bindable] private var Quantity:Array= new Array("one","two","three","four");
                                          
                           override public function set data(value:Object):void
                           {
                                super.data = value;
                                for (var i:int = 0; i < Quantity.length;i++)
                                {
                                     if (Quantity[i]  == data.qty) caseList.selectedIndex=i;                         
                                }     
                           }
                           protected function caseList_changeHandler(event:ListEvent):void
                           {
                                caseValue=caseList.selectedLabel;
                           }
                      ]]>
                 </mx:Script>
                 <mx:String id="caseValue" />
                 <mx:ComboBox id="caseList" width="100" dataProvider="{Quantity}" change="caseList_changeHandler(event)"
                                                exitFrame="caseValue=caseList.selectedLabel"/>
            </mx:Box>

             

            have fun with flex

             

            David.