Working with DataGrid in Flex (Flash Builder) Updating Data from DataGrid to database

We want to create a simple DataGrid that reads and writes back data
to MySQL table. The update process can be done ad-hoc (as soon as the user finishes updating cell)
or by clicking a button after editing all values.

DataGrid and button definishions in MXML:

<mx:DataGrid x="534" y="35" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getAllItemsResult.lastResult}" editable="true" enabled="true" dataChange="dataGrid_dataChangeHandler(event)" itemEditEnd="dataGrid_itemEditEndHandler(event)" click="dataGrid_clickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="CONT" dataField="CONT"/>
<mx:DataGridColumn headerText="ID" dataField="ID"/>
</mx:columns>
</mx:DataGrid>
<s:Button x="744" y="35" label="Save" click="button2_clickHandler(event)"/>


Events are fired as follows:

dataGrid_itemEditEndHandler - for every row in dataGrid! when we "edit" dataGrid on a web page
dataGrid_dataChangeHandler(event) - fires up when "source" data changes
   (IT WILL NOT fire when you finish "editing" dataGrid and want to upload data do database server)

You can find cell editing help here:
http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_7.html


Event methods:

protected function button2_clickHandler(event:MouseEvent):void
{
//dataGrid is the id (name) of our dataGrid table
var dataProvider = dataGrid.dataProvider;
var item = null;
for (var i:int = 0; i < dataProvider.length; i++)
{
item = dataProvider.getItemAt(i);
//updateItem is the method of SamplePHP in our services connecting to MySQL database
samplePhp.updateItem(item);
} 

}


protected function dataGrid_itemEditEndHandler(event:DataGridEvent):void
{
// Get the cell editor and cast it to TextInput.
var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
// Get the new value from the editor.
var newVal:String = myEditor.text;
// Get the old value.
var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField]; 

//dataGrid is the id (name) of our dataGrid table
var dataProvider = dataGrid.dataProvider;
var item = null;
//this allows us to fire the update only once. dataGrid_itemEditEndHandler is fired for EVERY row :)
if (oldVal !== newVal)
{
var item = dataProvider.getItemAt(event.rowIndex);
//CONT is the name of the row's column we want to update
dataGrid.selectedItem.CONT = newVal;
//updateItem is the method of SamplePHP in our services connecting to MySQL database
samplePhp.updateItem(item);
//Alert.show("Item Edited");
}
}




Source files:
http://sites.google.com/site/bkosarzyckiaboutme/FlashBuilderDatabaseTableUpdateProject.rar

https://sites.google.com/site/bkosarzyckiaboutme/FlashBuilderDatabaseTableUpdateProjectMySQLDatabase.zip

http://sites.google.com/site/bkosarzyckiaboutme/SamplePhp.php

To generate  a sample PHP connecting class go to Data/Services tab (on the bottom) and click "add new service".

You need Zend Framework to connect to PHP. FlashBuilder will install it for you in $WEB_ROOT$/ZendFramework.



database user: root; pass: sys;