datagrid multiple components in one column

Question

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

Answer 1

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.
}

Answer 2

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"&gt;

<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>