Posted on

Get values from Flex Datagrid

The below example shows you how to retrieve values from datagrid on click of the Button embedded in Datagrid.
CompanyDetails.xml

<?xml version=”1.0″ ?>
<content>
<item>
<Company>Google</Company>
<Feature>Search Engine / Mail / Social Media</Feature>
<url>www.google.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
</content>

Sample.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)”>
<mx:Script> <![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
private function openXMLValues(e:Event):void
{
var XMLConv:XMLList=new XMLList(e.target.data)
var XMLL:XMLListCollection=new XMLListCollection(XMLConv.item)
Alert.show(XMLL.toString())
DG.dataProvider=XMLL;
}
private function onCreate(e:Event):void
{
var XMLLoader:URLLoader=new URLLoader(new URLRequest(“c:\\CompanyDetails.xml”))
XMLLoader.addEventListener(Event.COMPLETE,openXMLValues) }
public function CallB(e:Event):void
{ var col:DataGridColumn = DG.columns[0];  //Access to the first(0) Column
Alert.show(DG.selectedItem[col.dataField]); }  // Retrieving clicked row and the first column value.
]]>
</mx:Script>
<mx:DataGrid x=”21″ y=”25″ width=”388″ height=”220″ id=”DG”>
<mx:columns>
<mx:DataGridColumn dataField=”Company” />
<mx:DataGridColumn dataField=”Feature” />
<mx:DataGridColumn itemRenderer=”{ButtonRen}” />
</mx:columns>
</mx:DataGrid>
<mx:Component id=”ButtonRen”>
<mx:Button label=”Generate” click=”outerDocument.CallB(event)”>
</mx:Button>
</mx:Component>
</mx:Application>

Screenshot

Posted on

Simple Datagrid In Flex

A DataGrid is a formatted table whose items can be edited and displayed via custom renderers.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var Values:ArrayCollection=new ArrayCollection([
{Company:”Google”,Feature:”Mail / Search Engine/Social Network”},
{Company:”Yahoo”,Feature:”Mail /Search Engine”}
]); //Creating an Array Collection with “Company and Feature as Identifiers 


 private function onCreate(e:Event):void
{
DG.dataProvider=Values;  // Assigning “Values” Arraycollection as a Dataprovider to DataGrid, “Comany” and “Feature” are considered automatically to be the column names for Datagrid
}
]]>
</mx:Script>
<mx:DataGrid x=”10″ y=”21″ width=”388″ height=”220″ id=”DG”>
</mx:DataGrid>
</mx:Application>

Output