Home > Adobe Flex/Air > Get selected cell value of DataGrid in FLex

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!

About these ads
Categories: Adobe Flex/Air Tags:
  1. Asanka Lakamal
    October 14, 2009 at 11:02 AM

    Thanks a lot.

  2. Rod
    March 24, 2010 at 3:16 PM

    This is great. Is there a way to make it work with labelFunction? I’ve tried but pretty stumped.

  3. Ijimero
    August 24, 2010 at 7:21 PM

    how can I get the Highlighted Item with the MouseOver event?

  4. Linda
    October 8, 2010 at 5:13 PM

    Hi , i see you are able to get selected cell value from the selected row and column name. Am trying to get a cell value and not necessarily the selected cell. How do i go about this if i have the column index and row index. Thank you.

  5. Vigin Kurakar
    October 3, 2012 at 10:46 AM

    Hi,
    i have one datagrid and retrive data from sql server using PHP. Its working perfect. But i want, – from this datagrid, while i am clicking one row, selecting the first cell and search in sql database like( select * from table name where account = cell[1]) and shows in another dagrid in same page.

    Please help me.

    Thanks
    Vigin Kurakar

  6. June 15, 2014 at 2:12 PM

    Hey! Someone in my Myspahe group shared this site with
    us so I came to give it a look. I’m definitely loving the information. I’m book-marking and will be tweeting this to my
    followers! Terrific blog and terrific design and style.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: