Get selected cell value of DataGrid in FLex

In the DataGrid control of Flex, it doesn’t support any property related to the selected column index so we cannot get its value directly. Instead, we have to use other way. DataGrid supports events called [ItemClick] or [ItemDoubleClick], when using these events, we can retrieve the column index of the clicked item.

To demonstrate this action, i created an sample that includes a DataGrid and a PopupWindow. When user click on an item of DataGrid, it’ll get the selected column value and display on the PopupWindow. (the two forms must be put at the same directory)

The first is MainForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import flash.events.Event;
import mx.controls.DataGrid;
import mx.events.ListEvent;
import mx.collections.ArrayCollection;
import mx.containers.TitleWindow;
import mx.events.DataGridEvent;
import mx.managers.PopUpManager;
import PopupForm;</code>

[Bindable]
private var dgArrayCollection:ArrayCollection =
new ArrayCollection([
{id:'1', name:'John'},
{id:'2', name:'Alex'},
{id:'3', name:'Peter'},
{id:'4', name:'Sam'},
{id:'5', name:'Alis'},
{id:'6', name:'Robin'},
{id:'7', name:'Mark'},
{id:'8', name:'Steave'},
{id:'9', name:'Fill'},
{id:'10', name:'Abraham'},
{id:'11', name:'Hennery'},
{id:'12', name:'Luis'},
{id:'13', name:'Herry'},
{id:'14', name:'Markus'},
{id:'15', name:'Flip'}
]);

private var newPopUp:PopupForm;

private function showPopUp(event:ListEvent):void {
var newPopUp:PopupForm = PopupForm(PopUpManager.createPopUp(this, PopupForm, true));

// Get the target of this event (Datagrid)
var dataGrid:DataGrid = event.target as DataGrid;
// Get selected column index
var dsColumnIndex:Number = event.columnIndex;
// based on the selected column index
// Get the DataGridColumn object to get the selected column name
var col:DataGridColumn = dataGrid.columns[dsColumnIndex];
// Get selected cell value from the selected row and column name
var newValue:String = dataGrid.selectedItem[col.dataField];

newPopUp.txtFromOutSide = newValue;

PopUpManager.centerPopUp(newPopUp);
}
]]>
</mx:Script>
<mx:VBox width="300" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:DataGrid id="dg" width="50%" height="100%" borderStyle="none"
dataProvider="{dgArrayCollection}" doubleClickEnabled="true" itemDoubleClick="showPopUp(event)" >
<mx:columns>
<mx:DataGridColumn dataField="id" headerText="ID"/>
<mx:DataGridColumn dataField="name" headerText="Name"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application>

The second form is PopupForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
width="200" height="150" borderStyle="solid"
borderColor="0xCCCCCC" cornerRadius="5">

<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

[Bindable]
public var txtFromOutSide: String;

private function onClose():void {
PopUpManager.removePopUp(this);
}

]]>

</mx:Script>

<mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Label id="lbl" text="{txtFromOutSide}" textAlign="center"/>
<mx:Button label="OK" click="onClose()"/>
</mx:VBox>
</mx:TitleWindow>

Hope this help!

Advertisement