October 29th, 2007 by Kyle
Tags: column, column-position, datagrid, Flex, item-renderer, itemrenderer, mxml, row, row-position, verticalscrollposition
Posted in: Flex
I have come across a few cases where it was useful to have the column and row positions within an itemRenderer and so have made this sample to demonstrate how to do that.
Here is the application code:
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:script>
<!–[CDATA[
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
private static var object1:Object = new Object();
object1.name = "Object 1";
private static var object2:Object = new Object();
object2.name = "Object 2";
private static var object3:Object = new Object();
object3.name = "Object 3";
private static var object4:Object = new Object();
object4.name = "Object 4";
private static var object5:Object = new Object();
object5.name = "Object 5";
private static var object6:Object = new Object();
object6.name = "Object 6";
private static var object7:Object = new Object();
object7.name = "Object 7";
private var things:Array = [object1, object2, object3, object4, object5, object6, object7]–>
[Bindable]
public var thingsAC:ArrayCollection = new ArrayCollection(things);
]]>
</mx:script>
<mx:datagrid id="dg" width="510" height="100">
draggableColumns="false" dataProvider="{thingsAC}"
horizontalScrollPolicy="on"
rowCount="4">
<mx:columns>
<mx:datagridcolumn width="200" headertext="Name" datafield="name">
<mx:datagridcolumn width="200" headertext="Column 2" itemrenderer="MyIR">
<mx:datagridcolumn width="200" headertext="Column 3" itemrenderer="MyIR">
<mx:datagridcolumn width="200" headertext="Column 4" itemrenderer="MyIR">
</mx:datagridcolumn>
</mx:datagridcolumn>
</mx:datagridcolumn>
</mx:datagridcolumn></mx:columns></mx:datagrid></mx:application>
Here is the code for my itemRenderer:
<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalalign="center">
implements="mx.controls.listClasses.IDropInListItemRenderer"
preinitialize ="init();">
<mx:script>
<!–[CDATA[
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import flash.events.Event;
import mx.collections.ArrayCollection;
[Bindable]–> public var _lbl:String;
private function onChange(event:Event):void{
var myListData:DataGridListData = DataGridListData(listData);
}
private var _listData:BaseListData;
private var myDG:DataGrid;
public function get listData():BaseListData {
return _listData;
}
public function set listData( value:BaseListData ):void {
_listData = value;
myDG = _listData.owner as DataGrid;
}
public function init():void {
addEventListener("dataChange", handleDataChanged);
}
public function handleDataChanged(event:Event):void {
// Cast listData to DataGridListData.
var myListData:DataGridListData = DataGridListData(listData);
var row:int=myListData.rowIndex+myDG.verticalScrollPosition;
//to make 1 based
var col:int=myListData.columnIndex+1;
_lbl="row: " + String(row) +
" column: " + String(col);
}
]]>
</mx:script>
<mx:label id="lbl" text="{_lbl}">
</mx:label>
</mx:vbox>
Here is the running application:
Browse the source of this example.
Download a zipfile containing the source to this sample.
Tweet
4 Comments »

August 18th, 2008 at 6:44 pm
Very helpful, thanks.
I wonder what the function ‘onChange’ (in the itemRenderer) is for ?
August 28th, 2008 at 3:21 am
hi,
THIS IS ABSLOLUTELY WHAT I’VE BEEN LOOKING FOR !!!
In fact, the problem is very simple :
how I get the row or column index of a cell in a itemRenderer.
I think adobe should upgrade this library …
Thanks a lot.
October 10th, 2009 at 2:21 pm
I need to know how to get the data from column when my renderer is column b. I have an item renderer as a label for an advanceddatagrid. On the datachangeevent I set the variables of the cell click event. I can get the current cell information and in debug I can see the value I need in the “item” object, but I’m not able to grab it. Here is my ItemRenderer:
<a href=’event:flex.org’>{data[dataField_obj]}</a></u>”
link=”ban_Detail(event, data[dataField_obj], columnName_obj, _rowIndex)”>
Can you help please?
January 21st, 2010 at 5:21 pm
This has helped us a ton!!! Thanks!