Set value of another cell in same row from DataGrid

Posted on 2009-12-18
Last Modified: 2012-05-08

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?

Question by:moagrius
    LVL 10

    Accepted Solution

    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;

    LVL 19

    Author Comment

    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

    LVL 19

    Author Comment

    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;
    LVL 19

    Author Closing Comment

    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
    LVL 19

    Author Comment

    I've got another related issue - and opened a new Question for it - here:

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    Flex Air Internet connectivity 5 534
    FLEX 3 LineChart doubt 4 259
    Getting rid of an unwanted URL 5 214
    AIR Desktop App - open PDF file 6 898
    First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
    OfficeMate Freezes on login or does not load after login credentials are input.
    how to add IIS SMTP to handle application/Scanner relays into office 365.
    Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now