6 Replies Latest reply on Aug 30, 2010 3:52 AM by sd_brown

    DropDownList as a custom renderer

    Zolotoj Level 3

      Any idea how to create a custom renderer based on DropDownList for dataGrid?

       

      Thanks

        • 1. Re: DropDownList as a custom renderer
          Zolotoj Level 3

          What I am actually is trying to do is to have two columns in the dropdown portion of the control.

          • 2. Re: DropDownList as a custom renderer
            Barna Biro Level 3

            You'll create this renderer as any other rendere. There's nothing "special" in it. You just need to pass in the correct values to the reneder and that's kinda it.

            • 3. Re: DropDownList as a custom renderer
              Flex harUI Adobe Employee

              The Flex4 DropDownList doesn't implement IListItemRenderer so you will have to implement that.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: DropDownList as a custom renderer
                sd_brown

                Re: The Flex4 DropDownList doesn't implement IListItemRenderer so you will have to implement that!

                 

                I have managed to get the DropDownList working but the scroll bar and up and down arrows dont work the DropDownList simply closes, this is realy bothersome, has anybody got the DropDownList to work in a DataGrid, I would hate to lose a client.

                • 5. Re: DropDownList as a custom renderer
                  Flex harUI Adobe Employee

                  Use a custom skin and set the owner property of the popup to be the skin.

                  • 6. Re: DropDownList as a custom renderer
                    sd_brown Level 1

                    I'm sorry but that went a little over my head, could you point me in the direction of an example, alternativly I have extracted the following example from my application showing what I have so far. If I skin my ItemRenderer for the DropDownList, I'm worried it will upset the ItemRenderer for each of the items in the list!

                     

                    <?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/mx"
                                   minWidth="955" minHeight="600"
                                   creationComplete="application1_creationCompleteHandler(event)"
                                   viewSourceURL="srcview/index.html">
                       
                        <fx:Script>
                            <![CDATA[       
                                import mx.collections.ArrayCollection;
                                import mx.events.FlexEvent;

                     

                                [Bindable]
                                protected var acArrayCollection:ArrayCollection = new ArrayCollection();
                               
                                protected function application1_creationCompleteHandler(event:FlexEvent):void
                                {
                                    var obj:Object;
                                    for (var i:int = 0; i<10; i++)
                                    {
                                        obj = new Object();
                                        obj.idx1 = i;
                                        obj.item = i;
                                        obj.idx2 = i;
                                        acArrayCollection.addItem(obj);
                                    }
                                }

                     

                            ]]>
                        </fx:Script>
                       
                        <fx:Declarations>
                            <!-- Place non-visual elements (e.g., services, value objects) here -->
                        </fx:Declarations>
                       
                        <mx:DataGrid x="10" y="10" dataProvider="{acArrayCollection}" editable="true">
                            <mx:columns>
                                <mx:DataGridColumn headerText="" dataField="idx1" width="50" editable="false" textAlign="center"/>
                                <mx:DataGridColumn headerText="DataGridColumn" dataField="item" width="260"
                                                   itemRenderer="itemRenderer.IRDropDownList" rendererIsEditor="true"
                                                   editorDataField="selectedItem"/>
                                <mx:DataGridColumn headerText="" dataField="idx2" width="50" editable="false" textAlign="center"/>
                            </mx:columns>
                        </mx:DataGrid>
                    </s:Application>

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                              xmlns:s="library://ns.adobe.com/flex/spark"
                                              xmlns:mx="library://ns.adobe.com/flex/mx"
                                              focusEnabled="true">
                        <fx:Script>
                            <![CDATA[
                                import mx.events.DragEvent;
                               
                                import spark.events.DropDownEvent;
                                import spark.events.IndexChangeEvent;
                               
                                [Bindable]
                                public var selectedItem:int;
                               
                                protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void
                                {
                                    selectedItem = dropDown.selectedIndex;
                                }

                     

                                override public function set data(value:Object):void
                                {
                                    super.data = value;
                                   
                                    selectedItem = value.item;
                                }
                               
                            ]]>
                        </fx:Script>
                       
                        <s:DropDownList id="dropDown" left="3" right="3" width="100%"
                                        itemRenderer="itemRenderer.IRLabel"
                                        selectedIndex="{selectedItem}"
                                        change="dropdownlist1_changeHandler(event)">
                            <s:dataProvider>
                                <s:ArrayCollection>
                                    <fx:String>Option 1</fx:String>
                                    <fx:String>Option 2</fx:String>
                                    <fx:String>Option 3</fx:String>
                                    <fx:String>Option 4</fx:String>
                                    <fx:String>Option 5</fx:String>
                                    <fx:String>Option 6</fx:String>
                                    <fx:String>Option 7</fx:String>
                                    <fx:String>Option 8</fx:String>
                                    <fx:String>Option 9</fx:String>
                                    <fx:String>Option 10</fx:String>
                                    <fx:String>Option 11</fx:String>
                                    <fx:String>Option 12</fx:String>
                                </s:ArrayCollection>
                            </s:dataProvider>
                        </s:DropDownList>
                       
                    </s:MXDataGridItemRenderer>

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                    xmlns:s="library://ns.adobe.com/flex/spark"
                                    xmlns:mx="library://ns.adobe.com/flex/mx"
                                    autoDrawBackground="true">
                       
                        <fx:Script>
                            <![CDATA[
                               
                                [Bindable]
                                public var bgColor:int;
                               
                                [Bindable]
                                public var myHoverColor:int;
                               
                                [Bindable]
                                public var mySelectColor:int;
                               
                                [Bindable]
                                public var myColor:int;

                     

                                override public function set itemIndex(value:int):void {
                                   
                                    super.itemIndex = value;
                                   
                                    if ((value%2) == 0) {
                                        bgColor= 0xFFFFFF;
                                    }
                                    if ((value%2) == 1) {
                                        bgColor= 0xE0E0E0;
                                    }
                                }
                               
                                override public function set data(value:Object):void
                                {
                                    super.data = value;
                                   
                                    if (value == "Option 5")
                                    {
                                        labelDisplay.setStyle("color","#FFFFFF");
                                        bgColor = 0x808080;
                                        myHoverColor = 0x808080;
                                        mySelectColor = 0x808080;
                                        myColor = 0xFFFFFF;
                                        labelDisplay.left = 3;
                                    }
                                    else
                                    {
                                        labelDisplay.setStyle("color","#000000");
                                        //myBackColor = 0xFFFFFF;
                                        myHoverColor = 0x5050A0;
                                        mySelectColor = 0x7070C0;
                                        myColor = 0x000000;
                                        labelDisplay.left = 13;
                                    }
                                }
                               
                            ]]>
                        </fx:Script>
                       
                        <s:states>
                            <s:State name="normal" />
                            <s:State name="hovered" />
                            <s:State name="selected" />
                        </s:states>
                       
                        <s:Rect id="bgRect"
                                includeIn="normal,hovered,selected"
                                left="0" right="0" top="0" bottom="0">
                            <s:fill>
                                <s:SolidColor
                                    color = "{bgColor}"
                                    color.selected="{mySelectColor}"
                                    color.hovered="{myHoverColor}"/>
                            </s:fill>
                        </s:Rect>

                     

                        <s:Label id="labelDisplay"
                                 color="{myColor}"
                                 right="3" top="4" bottom="3"/>
                       
                    </s:ItemRenderer>