Flex DataGrid: Change value based on another value?

Question

Hi!

I have a DataGrid in Flex, with one column a checkbox and another a numeric value. When the checkbox is clicked, the numeric value should change, either to 0 if the checkbox is unselected, or to a pre-defined minimum value if the checkbox is selected. Here is the code I have:

<mx:DataGrid x="0" y="45" width="272" height="525" dataProvider="{dp}" variableRowHeight="true" editable="true" id="equipmentDG" verticalAlign="middle">                
    <mx:columns>                    

        <mx:DataGridColumn headerText="" headerStyleName="gridheader" width="20" dataField="included" editorDataField="selected" rendererIsEditor="true">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:CheckBox click="handleClicks(event)">
                        <fx:Script>
                            <![CDATA[
                            public function handleClicks(event:MouseEvent):void
                            {
                                data.included = !data.included;

                                if(data.included && data.antal == 0)     
                                    data.antal = data.minNo; 
                                else if(!data.included) 
                                    data.antal = 0;
                            }
                            ]]>
                        </fx:Script>
                    </mx:CheckBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
            <mx:itemEditor>
                <fx:Component>

                    <mx:NumericStepper stepSize="1" width="35" height="20"  focusOut="numericstepper1_changeHandler(event)">
                        <fx:Script>
                            <![CDATA[
                            import mx.events.NumericStepperEvent;
                            override public function set data(value:Object):void
                            {
                                super.data = value;

                                if (value && value.hasOwnProperty("minNo"))
                                    minimum = value.minNo;

                                if (value && value.hasOwnProperty("maxNo"))
                                    maximum = value.maxNo;                                              
                            }

                            protected function numericstepper1_changeHandler(event:Event):void
                            {
                                if(data.antal > 0)
                                    data.included = true;
                                else
                                    data.included = false;
                            }

                            ]]>
                        </fx:Script>

                    </mx:NumericStepper>                                        

                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>


    </mx:columns>
</mx:DataGrid>

The value updates in the data (I can see it when I close and open the dialog this is in), but it doesn't update instantly in the data grid. How can I make the value visibly change as soon as the checkbox is clicked?

Answer 1

Here is the quick-and-dirty approach: re-assign the dataProvider. That should force an invalidation of the DataGrid.

Answer 2

In your data object, make sure to fire an event every time the included property changes. In your 2nd itemRenderer listen to the event and update the value whenever the property changes.

Conceptually like this:

In the data object:

private var _included : Boolean;
public function get included():Boolean{
 return this._included;
}

public function set included(value:Boolean):void
 this._included = value;
 this.dispatchEvent(new Event('includedChanged');
}

Add a renderer to your second column, like this:

 <mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
  <mx:itemRenderer>
   <fx:Component>
   <mx:Label dataChange="onDataChange()" >
    <fx:Script>
     <![CDATA[
      public function onDataChange():void{
       thistext = data['Antal'];
       this.data.addEventListener('includedChanged',onIncludedChange);
      }
      public function onIncludedChange(e:Event):void{
       this.text = data['Antal'];
      }
     ]]>
    </fx:Script>
   </mx:Label>
  </fx:Component>
  </mx:itemRenderer>
  <mx:itemEditor>
   <fx:Component>

    <mx:NumericStepper stepSize="1" width="35" height="20"  focusOut="numericstepper1_changeHandler(event)">
     <fx:Script>
      <![CDATA[
       import mx.events.NumericStepperEvent;
       override public function set data(value:Object):void{
        super.data = value;

        if (value && value.hasOwnProperty("minNo"))
         minimum = value.minNo;

        if (value && value.hasOwnProperty("maxNo"))
          maximum = value.maxNo;                                              
        }

        protected function numericstepper1_changeHandler(event:Event):void
        {
         if(data.antal > 0)
          data.included = true;
         else
          data.included = false;
         }

         ]]>
        </fx:Script>
       </mx:NumericStepper>                                        
      </fx:Component>
     </mx:itemEditor>
    </mx:DataGridColumn>

Answer 3

I would just mark antal as [Bindable] and use dp as an ArrayCollection.