Flex DataGrid Editing Cells
Flex datagrids provide an easy way to edit data. However one minor issue is that by default editable cells have no visual indication that they are actually editable.
You can add a graphical or textual indication that is a cell is editable with an item renderer.
Here's the code to do this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" viewSourceURL="srcview/index.html">
<mx:DataGrid id="myDG" dataProvider="{customers}" rowCount="5" width="300" height="200" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Name" width="100" dataField="name" editable="false" editorDataField="text">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.name}" />
<mx:Spacer width="100%" />
<mx:Label text="+" click="outerDocument.editCell(0)" toolTip="Edit" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextInput text="{data.name}" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Addresss" dataField="address" width="200" editable="false" editorDataField="text">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.address}" />
<mx:Spacer width="100%" />
<mx:Label text="+" click="outerDocument.editCell(1)" toolTip="Edit" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextInput text="{data.address}" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Model id="custdata">
<customers>
<customer>
<name>Cust1</name>
<address>Address1</address>
</customer>
<customer>
<name>Cust2</name>
<address>Address2</address>
</customer>
<customer>
<name>Cust3</name>
<address>Address3</address>
</customer>
</customers>
</mx:Model>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var customers:ArrayCollection = new ArrayCollection();
private function init():void {
customers = new ArrayCollection(custdata.customer);
}
public function editCell(column:Number):void {
myDG.editedItemPosition = {columnIndex:column, rowIndex:myDG.selectedIndex}
}
]]>
</mx:Script>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" viewSourceURL="srcview/index.html">
<mx:DataGrid id="myDG" dataProvider="{customers}" rowCount="5" width="300" height="200" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Name" width="100" dataField="name" editable="false" editorDataField="text">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.name}" />
<mx:Spacer width="100%" />
<mx:Label text="+" click="outerDocument.editCell(0)" toolTip="Edit" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextInput text="{data.name}" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Addresss" dataField="address" width="200" editable="false" editorDataField="text">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.address}" />
<mx:Spacer width="100%" />
<mx:Label text="+" click="outerDocument.editCell(1)" toolTip="Edit" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextInput text="{data.address}" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Model id="custdata">
<customers>
<customer>
<name>Cust1</name>
<address>Address1</address>
</customer>
<customer>
<name>Cust2</name>
<address>Address2</address>
</customer>
<customer>
<name>Cust3</name>
<address>Address3</address>
</customer>
</customers>
</mx:Model>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var customers:ArrayCollection = new ArrayCollection();
private function init():void {
customers = new ArrayCollection(custdata.customer);
}
public function editCell(column:Number):void {
myDG.editedItemPosition = {columnIndex:column, rowIndex:myDG.selectedIndex}
}
]]>
</mx:Script>
</mx:Application>
There's just a few thing to note:
- The datagrid needs to be marked as editable but you don't need to make the columns editable. The editable cell can set by setting the editedItemPosition property of the datagrid.
- The current row can be obtained by looking at the value of the selectedIndex property.
- You need to create an item editor as well as an item renderer and set the editorDataField for editing cells. This sets the value of the field after it has been edited.
- This example uses a "+" to indicate that a cell is editable but you could use an image instead.
Here what the code looks look when run (right click to view source and/or download):
Could not resolve <mx:itemRenderer> to a component implementation.
1. adding the restrict tag to the input field.
2. giving the user info on which one is editable.
I made some changes in order to center the field values and took out the spacer.
<mx:Component>
<mx:HBox click="outerDocument.editCell(0)" horizontalAlign="center">
<mx:Label text="{data.MaxCapacity}" width="93%" paddingLeft="18" />
<mx:Label textAlign="right" text="+" toolTip="Edit" width="13" />
</mx:HBox>
</mx:Component>
Here's your dataGrid code:
<mx:DataGridColumn headerText="Quantity" dataField="Quantity" textAlign="center" itemRenderer="path.to.your.view.EditableCellRenderer"
itemEditor="path.to.your.view.EditableCellEditor" />
And here's your editable cell editor:
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
restrict="0-9">
<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
/**
* Override data setter to set cell text according to the dataField
*/
public override function set data(value:Object):void
{
var dg:DataGrid = owner as DataGrid;
text = value[dg.columns[dg.editedItemPosition.columnIndex].dataField];
}
]]>
</mx:Script>
</mx:TextInput>
This is even better since you don't need to know which order your dataGrid column is and cuts your code by like 90%.