Different flex components based on AdvancedDataGrid column value

Question

I have the following code snippet, here I am able to change the label of the button based on the Data Grid's Column value. I am unable to think of a way where I can add two completely different buttons, based on Data Grid's value. Any help will be greatly appreciated.
_SM
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" >
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.collections.ArrayCollection;
import flash.utils.Dictionary;
import mx.core.Application;
import mx.controls.Alert;
import mx.events.ItemClickEvent;
[Bindable]
     public var seatingChart:ArrayCollection = new ArrayCollection();
     public function init():void {
var airCraftSeating:Object = new Object();
airCraftSeating["fname"] = "foo";
airCraftSeating["lname"] = "bar";
airCraftSeating["iflag"] = true;
seatingChart.addItem(airCraftSeating);
airCraftSeating = new Object();
airCraftSeating["fname"] = "dude";
airCraftSeating["lname"] = "buddy";
airCraftSeating["iflag"] = false;
seatingChart.addItem(airCraftSeating);
airCraftSeating = new Object();
airCraftSeating["fname"] = "playstation";
airCraftSeating["lname"] = "three";
airCraftSeating["iflag"] = true;
seatingChart.addItem(airCraftSeating);
airCraftSeating = new Object();
airCraftSeating["fname"] = "dudeeye";
airCraftSeating["lname"] = "buooosldk";
airCraftSeating["iflag"] = false;
seatingChart.addItem(airCraftSeating);
]]>
</mx:Script>
<mx:Canvas id="baseColor" height="100%" width="100%">
<mx:Form left="5" right="8" width="100%" height="100%" borderThickness="2" id="classForm" >
    <mx:DataGrid  id="dgClassTypes" dataProvider="{seatingChart}" sortableColumns="false" wordWrap="true" variableRowHeight="true" horizontalGridLines="false" verticalGridLines="false" width="100%" height="100%" verticalAlign="top" >
    <mx:columns>
<mx:DataGridColumn dataField="fname" headerText="fname"  textAlign="left" visible="true"/>
<mx:DataGridColumn dataField="lname" textAlign="center" visible="false"/>
<mx:DataGridColumn textAlign="center">
<mx:itemRenderer>
<mx:Component>
<mx:Button  label="{data.iflag?'check':'delete'}" visible="true" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="lname" textAlign="center" visible="false"/>
    </mx:columns>        
</mx:DataGrid>
</mx:Form>
</mx:Canvas>
</mx:Application>

Answer 1

Put the buttons in the VBox inside the itemrenderer and set the visible property bindable to iflag value.
<mx:DataGridColumn textAlign="center">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
    <mx:Button  label="check" visible="{data.iflag}" height="{data.iflag? 20:0}"/>       
    <mx:Button  label="delete" visible="{!(data.iflag)}" height="{data.iflag? 0:20}"/>   
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Thanks and Best regards,
Pooja Kuber | [email protected] | http://www.infocepts.comwww.infocepts.com