CODEWITHSUNDEEP
apache-flexdatagrid
Lizzan
Lizzan

Reputation: 1062

Flex DataGrid: Change value based on another value?

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?

Upvotes: 2

Views: 3406

Answers (3)

Maria Sakharova
Maria Sakharova

Reputation: 1379

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

Upvotes: 1

JeffryHouser
JeffryHouser

Reputation: 39408

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>

Upvotes: 3

splash
splash

Reputation: 13327

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

Upvotes: -1

Related Questions