Make item editor editable of the advancedatagrid in flex

Question

i have a advance datagrid in which i have 2 columns and every row of the column is a item editor

now i want to edit the row cell on double click i tried various things to make it editable some of properties are written in this code.

i make editable property true of colmns Grid and also i tried the rendrerIsEditor to set it true...

 <mx:AdvancedDataGrid id="varGrid"  width="100%" top="7" bottom="5" left="7" right="7" rowCount="15"
                            sortableColumns="true" editable="true">
            <mx:columns>
                <mx:AdvancedDataGridColumn headerText="Name" editable="true" dataField="name" sortable="true" editorDataField="text" rendererIsEditor="true">
                    <mx:itemEditor>
                        <fx:Component>
                            <s:GridItemEditor >
                                <s:TextInput id="variableName" text="@{value}" restrict="^\\{\\}" width="100%" height="100%" maxChars="250" 
                                            />
                            </s:GridItemEditor>
                        </fx:Component>
                    </mx:itemEditor>
                </mx:AdvancedDataGridColumn>

                <mx:AdvancedDataGridColumn headerText="Value" editable="true" dataField="lastValue" sortable="true" rendererIsEditor="true">
                    <mx:itemEditor>
                        <fx:Component>
                            <s:GridItemEditor>
                                <s:TextInput text="@{value}" restrict="^\\{\\}" width="100%" height="100%" maxChars="250"/>
                            </s:GridItemEditor>
                        </fx:Component>
                    </mx:itemEditor>
                </mx:AdvancedDataGridColumn>
            </mx:columns>

            <s:AsyncListView list="{data.variables}"/>
        </mx:AdvancedDataGrid>

please help me is i am doing it right or is there something missing in this.

Answer 1

There are a couple of things wrong with your code:

• You want to use a custom itemEditor, so don't set rendererIsEditor="true".
• You can't use s:GridItemEditor within the AdvancedDataGrid. It's for the Spark s:DataGrid.
• The id attribute is not allowed within <fx:Component>.
• Use Spark components as itemEditor is not as easy as it used to be with Halo components. I'd recommend you use the mx:TextInput instead of the s:TextInput. If you need to use the Spark one take a look at MXAdvancedDataGridItemRenderer and Using a Spark item renderer with an MX control.

Below is a code snippet that corrects all those issues and uses the mx:TextInput component:

<mx:AdvancedDataGrid id="varGrid" width="100%" top="7" bottom="5" left="7" right="7" rowCount="15" sortableColumns="true"
                     editable="true">
    <mx:columns>
        <mx:AdvancedDataGridColumn headerText="Name" editable="true" dataField="name" sortable="true" editorDataField="text">
            <mx:itemEditor>
                <fx:Component>
                    <mx:TextInput restrict="^\\{\\}" width="100%" height="100%" maxChars="250"/>
                </fx:Component>
            </mx:itemEditor>
        </mx:AdvancedDataGridColumn>

        <mx:AdvancedDataGridColumn headerText="Value" editable="true" dataField="lastValue" sortable="true">
            <mx:itemEditor>
                <fx:Component>
                    <mx:TextInput restrict="^\\{\\}" width="100%" height="100%" maxChars="250"/>
                </fx:Component>
            </mx:itemEditor>
        </mx:AdvancedDataGridColumn>
    </mx:columns>

    <s:AsyncListView list="{data.variables}"/>
</mx:AdvancedDataGrid>