flex mx:AdvancedDataGrid grouping and datagrid save

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  height="100%"
  width="100%">

<fx:Script>
<![CDATA[
/*


private var _id:Number;

public var _name:String;

 

public function get id():Number
{
return _id;
}

public function set id(value:Number):void
{
_id = value;
}

public function get name():String
{
return _name;
}

public function set name(value:String):void
{
_name=value;


*/
import mx.collections.ArrayCollection;

[Bindable]
public var arr:ArrayCollection=new ArrayCollection();

public var emp:EmployeeDetails=new EmployeeDetails();

protected function button1_clickHandler(event:MouseEvent):void
{
/*var obj:Object=new Object();
obj.id=txt_Id.text;
obj.name=txt_Name.text;
arr.addItem(obj);
*/
emp.id=Number(txt_Id.text);
emp._name=txt_Name.text;
arr.addItem(emp);
button2_clickHandler(event);


}

protected function datagrid1_clickHandler(event:MouseEvent):void
{
emp=dg.selectedItem as EmployeeDetails;
if (emp != null)
{
txt_Id.text=String(emp.id);
txt_Name.text=emp.name;
}
}
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:HBox height="100%"
width="100%">
<mx:VBox height="100%"
width="50%"
horizontalAlign="center"
verticalAlign="middle">
<s:Form height="100%"
width="100%">

<fx:Script>
<![CDATA[
protected function button2_clickHandler(event:MouseEvent):void
{
txt_Id.text="";
txt_Name.text="";
}
]]>
</fx:Script>

<s:FormItem label="Id">
<s:TextInput id="txt_Id"
restrict="0-9"/>
</s:FormItem>
<s:FormItem label="Name">
<s:TextInput id="txt_Name"/>
</s:FormItem>
<s:FormItem>
<mx:HBox>

<s:Button label="Save"
 click="button1_clickHandler(event)"/>
<s:Button label="Clear"
 click="button2_clickHandler(event)"/>
</mx:HBox>
</s:FormItem>
</s:Form>
</mx:VBox>
<mx:VBox height="100%"
width="50%"
horizontalAlign="center"
verticalAlign="middle">
<s:DataGrid height="100%"
id="dg"
dataProvider="{arr}"
width="100%"
click="datagrid1_clickHandler(event)">
<s:columns>
<mx:ArrayList>
<s:GridColumn headerText="Id"
 dataField="id"/>
<s:GridColumn headerText="Name"
 dataField="name"/>
</mx:ArrayList>
</s:columns>
</s:DataGrid>

<fx:Script>
<![CDATA[ 
import mx.collections.ArrayCollection;

[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection([
{name:"Barbara Jennings", region: "Arizona", total:70, children:[  
{detail:[{amount:5},{amount:10},{amount:20},{amount:45}]}]},
{name:"Dana Binn", region: "Arizona", total:130,  children:[ 
{detail:[{amount:15},{amount:25},{amount:35},{amount:55}]}]},
{name:"Joe Smith", region: "California", total:229,  children:[ 
{detail:[{amount:26},{amount:32},{amount:73},{amount:123}]}]},
{name:"Alice Treu", region: "California", total:230, children:[ 
{detail:[{amount:159},{amount:235},{amount:135},{amount:155}]}
]}
]);                                            
]]>
</fx:Script>

<mx:AdvancedDataGrid id="myADG" 
width="100%" height="100%" 
variableRowHeight="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name">
<mx:headerRenderer>
<fx:Component>
<mx:HBox horizontalAlign="center">
<s:Button label="Add Company"/>
</mx:HBox>
</fx:Component>
</mx:headerRenderer>
</mx:headerRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn dataField="total" headerText="Total"/>
</mx:columns>   
 
</mx:AdvancedDataGrid>
</mx:VBox>
</mx:HBox>
</s:Application>