Make item editor editable of the advancedatagrid in flex - apache-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>