4 Replies Latest reply on Jan 13, 2010 12:20 AM by archemedia

    Flex 3: Different controls in DataGrid rows

    jenueheightz

      Hi Flex devs,

       

      Is there a way to create different controls in Flex DataGrid rows?

      Like in the first row, i want to display a combobox and for the second row, displays a textbox

       

      Thanks,

       

      -jenue

        • 1. Re: Flex 3: Different controls in DataGrid rows
          jenueheightz Level 1

          any ideas is very much appreciated...

          Tnx

          • 2. Re: Flex 3: Different controls in DataGrid rows
            Gregory Lafrance Level 6

            Sure, create an itemRenderer that has VBox as its base, and then depending on whatever you are using to determine what control should be used, create that component in ActionScript, perhaps in the VBox creationComplete event handler.

             

            If this post answers your question or helps, please mark it as such.


            Greg Lafrance - Flex 2 and 3 ACE certified

            www.ChikaraDev.com

            Flex / AIR Development, Training, and Support Services

            • 3. Re: Flex 3: Different controls in DataGrid rows
              jenueheightz Level 1

              Hi Greg,

               

              Thanks for your reply.

               

              The problem I had is to display like different controls in every row. If i put in creationComplete() script to create new control, i think the control created will display in every row.

               

              I just have here ComboBox in every row of the first column in DataGrid. What I wanted to is to display controls in the second column base on the selected item from the ComboBox.

               

              Any idea?

               

              Thanks a lot.

               

              -jenue

              • 4. Re: Flex 3: Different controls in DataGrid rows
                archemedia Level 4

                Your item renderer should contain a script that creates a control depending on another value in your data property.

                 

                Here's an example:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
                    <mx:Script>
                        <![CDATA[
                            import mx.collections.ArrayCollection;
                           
                            [Bindable]
                            private var dp:ArrayCollection;
                           
                            private function init():void
                            {
                                var arr:Array = [{p1: "cb", p2: 1},
                                                 {p1: "cp", p2: 0xFF00FF}];
                                dp = new ArrayCollection();
                                dp.source = arr;
                            }
                           
                        ]]>
                    </mx:Script>
                    <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{dp}" variableRowHeight="true">
                        <mx:columns>
                            <mx:DataGridColumn headerText="Value 1" dataField="p1"/>
                            <mx:DataGridColumn headerText="Value 2" dataField="p2">
                                <mx:itemRenderer>
                                    <mx:Component>
                                        <mx:VBox width="100%" creationComplete="init()">
                                            <mx:Script>
                                                <![CDATA[
                                                    import mx.controls.HSlider;
                                                    import mx.controls.ColorPicker;
                                                    import mx.controls.CheckBox;
                                                    private function init():void
                                                    {
                                                        this.removeAllChildren();
                                                       
                                                        switch (data.p1)
                                                        {
                                                            case "cb":
                                                                var cb:CheckBox = new CheckBox();
                                                                cb.selected = Boolean(data.p2);
                                                                this.addChild(cb);
                                                                break;
                                                            case "cp":
                                                                var cp:ColorPicker = new ColorPicker();
                                                                cp.selectedColor = data.p2;
                                                                this.addChild(cp);
                                                                break;
                                                        }
                                                       
                                                    }
                                                ]]>
                                            </mx:Script>
                                        </mx:VBox>
                                    </mx:Component>
                                </mx:itemRenderer>
                            </mx:DataGridColumn>
                        </mx:columns>
                    </mx:DataGrid>
                   
                </mx:Application>

                 

                d