Set value of another cell in same row from DataGrid


I'm experienced with ActionScript, but very new to Flex.

I've got a DataGrid with several columns, one of which contains ComboBoxes.  Each DataGrid column uses a custom itemRenderer, which is defined in an ActionScript class (not MXML).

On change of any of the ComboBoxes, I need to update a couple other cells in the same row of the DataGrid, based on the selectedItem and the values of still other cells in the same row.

I think DataGridListData(listItem) gives me the DataGrid object, but how to I access the other cells in the same row as the ComboBox?

LVL 19
Who is Participating?
mplordConnect With a Mentor Commented:
Here's a quick tip on getting (from an ItemRenderer) the current grid, current grid column, and current column datafield property name:

var grid:DataGrid = DataGrid(DataGridListData(listData).owner);
var dgc:DGColumnBase = (grid.columns[DataGridListData(listData).columnIndex] as DGColumnBase);
var dgcfield:String = dgc.dataField;

However, to get/set other fields in the current selected row from the current itemRenderer, you don't need any of that.
'data' is you current row object. So data['propertyname'] is your access to the underlying row data.
Just work with 'data' (cast if necessary, e.g. (data as MyObject).field = ... )

So, e.g. you have two columns with combobox itemrenderers and within the itemrenderer you don't know which field you're editing, use dgcfield to figure it out.
Then use data['field'] to alter other contents.

After changing any data in other fields, you might well need to call 'this.invalidateDisplayList();' to ensure the grid is redrawn to show changes in other cells.

Final example:
In some cases I add in the constructor of my itemRenderer, an event listener for data change:

          public function MyItemRenderer()
                this.addEventListener(FlexEvent.DATA_CHANGE, onDataChange, false, 0, true);

then have:

        private function onDataChange(event:Event):void
            var grid:DataGrid = DataGrid(DataGridListData(listData).owner);
            var dgc:DGColumnBase = (grid.columns[DataGridListData(listData).columnIndex] as DGColumnBase);
            var dgcfield:String = dgc.dataField;

            ... do stuff based on above conditions ...
            ... e.g. data['myOtherField'] = data[dgcfield]*100;

moagriusAuthor Commented:
hey mplord,

thanks for replying - i was hoping you'd see this one.

your answer makes perfect sense, and is exactly what i was trying to do initially, but without success.  i'll post the relevant portions of the code and maybe you can tell me what i'm doing wrong.  i'm using the change event rather than the dataChange but afaik that shouldn't matter.

uomData is xml that just has two nodes per element: LABEL (hourly, daily, contract, other, etc) and RATE (the amount amount appropriate to the Unit) - you'll notice the line:

data.unitRate = selectedItem.RATE;

which is where i expected the last column of the datagrid to update, but it does not.  selectedItem.RATE does however alert out appropriately (shows the correct amount for the unit of measure).

i appreciate your help.
<!-- the application MXML -->

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="vertical" initialize="uomData.send()">

		import mx.collections.ArrayCollection;
		private var lineItems:ArrayCollection = new ArrayCollection();
		private function addRow():void{
			var row:Object = {
				deleteRow : null,
				dateRate : new Date(),
				uom : uomData.lastResult.node,
				unitRate : 0
		private function init():void{
			for(var i:int=0;i<2;i++){
  		id="uomData" />
  	<mx:DataGridColumn width="30" itemRenderer="renderers.DeleteRow" dataField="deleteRow" headerText="Delete" />
  	<mx:DataGridColumn width="120" itemRenderer="renderers.DateRate" dataField="dateRate" headerText="Date" />
  	<mx:DataGridColumn width="120" itemRenderer="renderers.UOMBox" dataField="uom" headerText="UOM" />
  	<mx:DataGridColumn width="30" dataField="unitRate" headerText="Unit" />

// the item renderer for the combo box

package renderers {
	import mx.controls.dataGridClasses.*;
	import mx.controls.ComboBox;
	import mx.controls.DataGrid;

	public class UOMBox extends ComboBox {		
		private function changeHandler(event:Event):void{
			data.unitRate = selectedItem.RATE;
		override public function set data(value:Object):void{
		 	dataProvider = value.uom;
		public function UOMBox():void		{
			labelField = "LABEL";
			addEventListener("change", changeHandler, false, 0, true);

Open in new window

moagriusAuthor Commented:
got it - i overrode the data setter, but neglected to assign it to assign it back to super

this line in the override fixed it = value;
moagriusAuthor Commented:
Thank you - I think I'll have a bunch more questions as I'm just now finishing up the books and trying to put theory in action - seems like you "grok" Flex, and I could use the help
moagriusAuthor Commented:
I've got another related issue - and opened a new Question for it - here:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.