2 numeric stepper components in an item renderer of flex

Question

I have to put 2 numeric stepper components in one column of a datagrid. I suppose I need to write my own item renederer code for that. How to write a code for putting 2 numeric stepper components in one coulmn of datagrid.

The 2 numeric steppers would work as time (Hour and Min) components. I cannot use readily availabel time components, and hence have to write something of the above for my own time component.

Answer 1

That correct, you need to create an item renderer. With Flex, this is relatively easy.

Here is an article on how to do it.

Answer 2

Try something like this

<mx:DataGridColumn headerText="Unit Price" dataField="price">
    <mx:itemRenderer>
        <mx:Component>
            <mx:NumericStepper ... />
            <mx:NumericStepper ... />
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

Or you could set the itemRenderer to a custom component

I.E.

<mx:DataGridColumn itemRenderer="com.myComponent" headerText="Unit Price" dataField="price">

(note you might need {com.myComponent} ... not sure on the syntax, just going off memory)

For your specific example I would probably create my own component with a mask like ##:## then use that as the item renderer.

Answer 3

Peter Ent's series on itemRenderers is a MUST for any Flex developer.