CODEWITHSUNDEEP
apache-flexflashactionscript-3datagrid
Sebastian Müller
Sebastian Müller

Reputation: 5589

datagrid multiple components in one column

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

Upvotes: 0

Views: 2177

Answers (2)

cliff.meyers
cliff.meyers

Reputation: 17734

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>

Upvotes: 1

Gabriel
Gabriel

Reputation: 1273

You need to write your own itemRenderer.

From a high-level, what you need to do is tell the column that you will render the column on a per row basis. Then, per row - you check the conditional that you need (like looking at a different column or whatever) and take the action that you want (like adding a radio button vs. some other component).

In the data column do something like this:

<mx:DataGridColumn id="yourColumn" 
headerText="Cool Column" editable="false" itemRenderer="SpecialCanvas"/>

Then in a component called 'SpecialCanvas' (let's say he extends a canvas), you can can events or override methods to render as needed... For example:

override protected function initializationComplete():void
{
  // check for the conditional that you want and add the component that
  // you need to this canvas or what not.
}

Upvotes: 1

Related Questions