having components based on Data Grid's column value.

[Steven Rodeo]

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>

[Ashwin Sridhar]

Where do you want to add the two buttons. Can you elaborate further

[Ashwin Sridhar]

I hope you want to implement two different functionalities based on status of iflag.
I such is the case, you neednt have to go in for two different buttons as one could do the job.

[Steven Rodeo]

Basically I have two buttons X and Y, all I want to do is, if the value is true I would like to show ButtonX / if false I want to show ButtonY

[Ashwin Sridhar]

I suppose the two buttons you use are the 'check' and 'delete' buttons.
Why don't you use single button with different functionalities for true and false cases.
this approach might be easy to implement i guess

[Steven Rodeo]

I don't know how to do that, I tried but doesn't work for me. I mean the same button with different functionalities

[Ashwin Sridhar]

You could easily do it by using a if condition. You can use then MouseEvent for the same.

<mx:DataGridColumn>
 <mx:itemRenderer>
  <mx:Component>
	<mx:Button label="{data.iflag?'check':'delete'}" click="call(event)" visible="false">
	<mx:Script>
       	  		<![CDATA[
           	  			import mx.controls.Alert;
               	  			public function call(event:MouseEvent):void{
				if(event.target.label == 'check'){
                          			Alert.show("within check");
			}
		 	else if(event.target.label == 'delete'){
			Alert.show("Within delete");
			}
		}
	                ]]>
</mx:Script>
</mx:Button>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

I have written this code according to your code snippet. It Works for me. hope this would be helpful to you

[Steven Rodeo]

Thank you soo much!. that works great.

I have a follow up question, what's wrong with this code ?

                                                      <mx:itemRenderer>
                                                        <fx:Component>
                                                                <mx:VBox>
                                                                        <mx:Image horizontalAlign="center" source="   {data.enable?'@Embed(source='images/disable.png')':'@Embed(source='images/enable.png')'}"/>
                                                                </mx:VBox>
                                                        </fx:Component>
                                                      </mx:itemRenderer>

[Ashwin Sridhar]

what is your issue with this code.

[Steven Rodeo]

Wont' compile

[Ashwin Sridhar]

You have messed up with Single quotes i guess.