Row specific limits on a NumericStepper in a DataGrid

Question

Hi all!

I have a datagrid in Flex 4 with a NumericStepper as editor for a numeric value. I can set pre-defined maximum and minimum values for the NumericStepper, but I need to be able to have different limits for each row in the DataGrid. How can I do this?

This is the code for the datagrid:

<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="0" maximum="50" stepSize="1" width="35" height="20"></mx:NumericStepper>                
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

Edit: Based on Flextras answer, I've changed the NumericStepper row to

<mx:NumericStepper minimum="{data.minNo}" maximum="{data.maxNo}" stepSize="1" width="35" height="20"></mx:NumericStepper>

but now I get a StackOverflowError when I click on the cell to change the value. I posted a new question regarding that here: http://stackoverflow.com/questions/3837185/stackoverflowerror-on-datagrid-row-specific-limits-in-a-numericstepper

Answer 1

Te DataGrid only creates rows for what is displayed on screen. It does not create rows for each item in your dataProvider. This is called renderer recycling and is done for performance reasons.

I would recommend that you should try to specify the max and min values of your NumericStepper based on elements of your data object, not based on the position of the row. Basically, something 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['min']}" maximum="data['max']}" stepSize="1" width="35" height="20"></mx:NumericStepper>                
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>