Question

I have a DataGrid with a NumericStepper as the item editor for one of the columns. The numeric stepper is supposed to get its max an min values from the data for each row. My MXML is like this:

<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="Benämning" headerStyleName="gridheader" fontSize="12" width="128" dataField="name" editable="false"/>
        <mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
            <mx:itemEditor>
                <fx:Component>
                    <mx:NumericStepper minimum="data.minNo" maximum="data.maxNo" stepSize="1" width="35" height="20"></mx:NumericStepper>               
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

The problem is that once I run the application and click the cell, I get a StackOverflowError after a bunch of other errors. The last lines of the stack trace I get (before they start repeating) is:

    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:12528]
    at mx.controls::NumericStepper/set data()[E:\dev\4.x\frameworks\projects\framework\src\mx\controls\NumericStepper.as:629]
    at mx.controls::NumericStepper/get data()[E:\dev\4.x\frameworks\projects\framework\src\mx\controls\NumericStepper.as:611]
    at Function/()[/Users/lisbeth/Documents/Development/Typkatalog/DevelopmentBranch/src/planeringsverktyg/dialogs/TentInfo.mxml:267]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.binding::PropertyWatcher/updateProperty()[E:\dev\4.x\frameworks\projects\framework\src\mx\binding\PropertyWatcher.as:334]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.binding::Watcher/wrapUpdate()[E:\dev\4.x\frameworks\projects\framework\src\mx\binding\Watcher.as:192]
    at mx.binding::PropertyWatcher/eventHandler()[E:\dev\4.x\frameworks\projects\framework\src\mx\binding\PropertyWatcher.as:375]

Any ideas?

Answer 1

Well, it looks like binding minimum and maximum to data results in an infinit loop. However, you don’t need binding to change those two values for each row in your DataGrid. Overriding the setter for data will do the trick. See the following example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               xmlns:local="*">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection([
                {name: "Name 1", antal: 1, minNo: 1, maxNo: 5},
                {name: "Name 2", antal: 2, minNo: 1, maxNo: 6},
                {name: "Name 3", antal: 3, minNo: 1, maxNo: 7}
                ]);
        ]]>
    </fx:Script>

    <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="Benämning" headerStyleName="gridheader" fontSize="12"
                               width="128" dataField="name" editable="false"/>
            <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">
                            <fx:Script>
                                <![CDATA[
                                    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;
                                    }
                                ]]>
                            </fx:Script>
                        </mx:NumericStepper>
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</s:Application>

There are explicit checks if the fields minNo and maxNo exist since somehow the setter gets called quite often and most of the time the value is not the expected object…