How ItemRenderer is different from ItemEditor in Flex 4?

Question

I know this type of questions already asked by many person but that post didn't give me more information to understand regarding the actually difference between ItemRenderer and ItenEditor in Flex Framework.

As I know ItemRenderer is used for displaying visual elements mostly and ItemEditor is used for editing purpose mainly.

So I have tried following Example to find the difference among that:

For ItemRenderer I used following codes:

<mx:DataGrid dataProvider="{initDG}">
    <mx:columns>
        <mx:DataGridColumn headerText="Artist" dataField="Artist"/>
        <mx:DataGridColumn headerText="Album" dataField="Album"/>
        <mx:DataGridColumn headerText="Price" dataField="Price">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:TextInput restrict="0-9" maxChars="10" />
                </fx:Component>
            </mx:itemRenderer> 
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Cover" dataField="Cover"/>
    </mx:columns>
</mx:DataGrid>

And I got the result as follows:

Where Price field is showing as editable.

And again I tried the same code with ItemEditor as follows:

<mx:DataGrid dataProvider="{initDG}">
    <mx:columns>
        <mx:DataGridColumn headerText="Artist" dataField="Artist"/>
        <mx:DataGridColumn headerText="Album" dataField="Album"/>
        <mx:DataGridColumn headerText="Price" dataField="Price">
            <mx:itemEditor>
                <fx:Component>
                    <mx:TextInput restrict="0-9" maxChars="10" />
                </fx:Component>
            </mx:itemEditor> 
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Cover" dataField="Cover"/>
    </mx:columns>
</mx:DataGrid>

And I got the result as follows:

But here Price field is non editable .

So As I am new to these controls I am getting confused why it is happening. After using ItemEditor as why that field is non editable.

If anybody have knowledge what is the reason behind that please help me to understand more details regarding these two controls.

Answer 1

In the first case, edit works in a roundabout way since you embedded an editable field inside a renderer. The cell is always in the edit mode and does not use the built-in edit mode of the DataGrid.

In the second case, your itemEditor is not activated by Flex because the DataGrid requires 'editable=true'. If you set editable to true, your itemEditor should be activated when the user clicks on the cell.

There is a third approach: use 'editable=true' for the DataGrid, keep the itemRenderer, and set 'rendererIsEditor' on the Column.

Check the examples here; Adobe Flex doc

Answer 2

Difference between ItemRenderer and ItemEditor:

When you use ItemRenderer you change the aspect of your component. In your case if you have a datagrid column, and apply and itemRenderer with an image you have in your column an image showed.

If you use ItemEditor you act on the aspect of your component when you try to change that column. If you put an ItemEditor on your column as TextInput when you click on your column will show a text input.

Flex has an automatic manage of ItemRenderer and ItemEditor, by default you have renderer is editor so when you want to implement on ly the ItemRenderer the same aspect you can use for edit your column.

If you want to take separate these features you can put rendererIsEditor = false but you must implement two functionalities.

I hope my explanation is clear. Tell me if you have other doubts