R – datagrid multiple components in one column

actionscript-3apache-flexdatagridflash

Hi I wanted to ask if there is a possibility to have both strings and radiobuttons in one column depending on the value of another column perhaps

|column1 | column 2   | 
|r       | radiobutton|
|s       | string     |

If there is an r in column 1 in column2 should appear a radiobutton, otherwise column 2 just shows a string.

Thanks for your answers

Sebastian

Best Answer

You do need to write an item renderer to do this. However, you want to update the state of the render whenever the "data" property is set. This is important since item renderers are recycled. Basically the data property gets set whenever the data for that renderer changes and this happens as you scroll the DataGrid.

Here's a simple Application with a DataGrid:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()">

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable] private var collection:ArrayCollection;

        private function onCreationComplete():void
        {
            collection = new ArrayCollection();
            for (var i:uint = 0; i < 20; i++)
                collection.addItem({name:'Person #'+i});
        }

    ]]>
</mx:Script>

<mx:DataGrid width="600" dataProvider="{collection}" rowCount="5">
    <mx:columns>
        <mx:DataGridColumn itemRenderer="com.foo.ItemRenderer"/>
    </mx:columns>
</mx:DataGrid>

</mx:Application>

And a simple MXML-based renderer:

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

<mx:Script>
    <![CDATA[

        override public function set data(value:Object):void
        {
            super.data = value;
            // only show radio buttons if the "name" property of the data contains "5"; otherwise show a label
            radioS.visible = radioS.includeInLayout = radioM.visible = radioM.includeInLayout = radioL.visible = radioL.includeInLayout = data.name.indexOf(5) > -1;
            labelName.visible = labelName.includeInLayout = data.name.indexOf(5) < 0;               
        }

    ]]>
</mx:Script>

<mx:Label id="labelName" text="{data.name}"/>
<mx:RadioButton id="radioS" label="Small" groupName="radioGroup"/>
<mx:RadioButton id="radioM" label="Medium" groupName="radioGroup"/>
<mx:RadioButton id="radioL" label="Large" groupName="radioGroup"/>

</mx:HBox>
Related Topic