How to add text Input in data Grid

I m trying to add a textInput in the datagrid so that users can see that there is a textbox for them to edit. I have a textInputRender so that I can show the textbox in the dataGrid and update the value accordingly.

I also have another dataGrid table to capture the values I have selected in the previous dataGrid table.

The problem is I am able to see the textbox in the dataGrid table. But I have to double click the cell and enter my value to save the value of the cell in the dataGrid back to the data provider.In reality the user will not double click to enter as they might just enter the value in. Is there a way to capture the value without double clicking the cell ??

Next problem after I double click the textBox and enter my new value for the quantity it do not reflect the change in the textbox. But however I can see that the newly entered value is captured.

Pls help me. I have been sruggling with this for very long. Pls can u tell me how I can slove this ?

This is my custom renderer of the textbox I place it within the GridItemRenderer tags :

<s:TextInput id="ti" text="{data.quant}"/>  

This is my code:

 <fx:Script>
    <![CDATA[                
        import FrontEndObjects.ColourItems;         
        import mx.collections.ArrayCollection;          
        import spark.events.IndexChangeEvent;

        [Bindable]
        private var order:ArrayCollection = new ArrayCollection();  

        private function addOrder():void{               
            var orderItems:ColourItems = new ColourItems("OrderNo","1","--Choose a colour--");
            order.addItem(orderItems);              
        }  

        [Bindable]
        private var confirmOrder:ArrayCollection = new ArrayCollection();   

        protected function saveData(event:MouseEvent):void
        {
            //dataGrid is the id (name) of our dataGrid table
            var dataProvider = myDG.dataProvider;               
            var item = null;
            for (var i:int = 0; i < dataProvider.length; i++)
            {
                item = dataProvider.getItemAt(i);
                confirmOrder.addItem(item);
                //Alert.show("the data is : " + item);
            } 

        }
    ]]>
</fx:Script>

<s:BorderContainer x="240" y="50" width="449" height="518">
    <s:DataGrid id="myDG" x="32" y="27" width="393" height="151" dataProvider="{order}"
                editable="true" variableRowHeight="true">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="label1" headerText="Order #" editable="false"/>                
                <s:GridColumn dataField="quant" headerText="Qty" editable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>                  
                <s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true">                       
                    <s:itemRenderer>
                        <fx:Component>                              
                            <s:GridItemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        import spark.events.IndexChangeEvent;

                                        protected function onCbChange(event:IndexChangeEvent):void
                                        {
                                            var value:String = (event.currentTarget as DropDownList).selectedItem;
                                            data[column.dataField] = value; 
                                        }
                                    ]]>
                                </fx:Script>                                    
                                <s:DropDownList id="cb" width="100%" change="onCbChange(event)" prompt="--Choose a colour--">  <!--selectedIndex="0" requireSelection="true" >-->
                                    <s:dataProvider>
                                        <s:ArrayCollection>
                                            <fx:String>red</fx:String>
                                            <fx:String>blue</fx:String>
                                            <fx:String>green</fx:String>
                                        </s:ArrayCollection>                                        
                                    </s:dataProvider>
                                </s:DropDownList>                                   
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>           
                </s:GridColumn>                 
            </s:ArrayList> 
        </s:columns >
    </s:DataGrid>
    <s:DataGrid id="myDG1" x="24" y="317" width="401" height="174" dataProvider="{confirmOrder}"
                requestedRowCount="4">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="label1" headerText="Ordernum - getback"></s:GridColumn>
                <s:GridColumn dataField="quant" headerText="quanty-getback"></s:GridColumn>
                <s:GridColumn dataField="color" headerText="color-getback"></s:GridColumn>
            </s:ArrayList>
        </s:columns>    
    </s:DataGrid>
    <s:Button x="355" y="186" label="add" click="addOrder()" />
    <s:Button x="277" y="186" label="save" click="saveData(event)"/>
</s:BorderContainer>