How to add text Input in data Grid? - apache-flex

Question

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>

Answer 1

Try this:
Set rendererIsEditable="true" in your GridColumn "quant"
<s:GridColumn dataField="quant" headerText="Qty" editable="true" rendererIsEditable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>
Change your ItemRenderer like this
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Binding source="ti.text" destination="data.quant"/>
<s:TextInput
id="ti"
text="{data.quant}"
editable="true"/>
</s:GridItemRenderer>
It works by me fine

Answer 2

I can't recognize which is the problem with your code anyway I managed to develop a:
textInput in the datagrid so that users can see that there is a
textbox for them to edit
Using this code
<mx:DataGrid id="weekGrid" width="100%" height="60%"
dataProvider="{weekList}" editable="true">
<mx:DataGridColumn id="noteColumn" dataField="note" editable="false"
headerText="Note" sortable="false">
<mx:itemRenderer>
<fx:Component>
<mx:VBox width="100%" height="100%" horizontalAlign="center"
verticalAlign="middle">
<fx:Script>
<![CDATA[
import managers.StraordinariManager;
import spark.events.TextOperationEvent;
protected function textinput1_changeHandler(event:TextOperationEvent):void
{
data['note']=textInput.text;
outerDocument.notSavedAlert.statrtBlinker();
}
]]>
</fx:Script>
<s:TextInput id="textInput" width="100%" height="100%"
borderVisible="false"
change="textinput1_changeHandler(event)"
editable="{data.oreStr!=null}"
text="{data.oreStr!=null?data.note:''}">
</s:TextInput>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:DataGrid>
I used an ItemRenderer instead of a ItemEditor to avoid the double click problem.
Notice that the column editable property is set to false, but the grid is set to editable="true".
I also used the same tecnique to insert also different components, this is an example using the radio button:
<mx:DataGridColumn id="flag" headerText="Approva Rifiuta" >
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" height="100%" horizontalAlign="center"
verticalAlign="middle">
<fx:Script>
<![CDATA[
import managers.IngressiManager;
import mx.events.FlexEvent;
protected function radiobutton1_changeHandler(event:Event):void
{
if(apprRb.selected){
data['flag']=ApprovazioneStraordinariView.APPROVA_FLAG;
data['note']="";
}else
if(rifRb.selected){
data['flag']=ApprovazioneStraordinariView.RIFIUTA_FLAG;
}
}
]]>
</fx:Script>
<s:RadioButton id="apprRb" label="A"
click="radiobutton1_changeHandler(event)"
groupName="approvaRifiutaGroup"
selected="{data['flag']==ApprovazioneStraordinariView.APPROVA_FLAG}">
</s:RadioButton>
<s:RadioButton id="rifRb" label="R"
click="radiobutton1_changeHandler(event)"
groupName="approvaRifiutaGroup"
selected="{data['flag']==ApprovazioneStraordinariView.RIFIUTA_FLAG}">
</s:RadioButton>
<fx:Declarations>
<s:RadioButtonGroup id="approvaRifiutaGroup">
</s:RadioButtonGroup>
</fx:Declarations>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>