Data Grid Save in flex

<?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[
            import mx.collections.ArrayCollection;
            protected function btnSave_clickHandler(event:MouseEvent):void
            {
                var obj : Object = new Object();
                obj.id = txtId.text;
                obj.name = txtName.text;
                dp.addItem(obj);               
               
                /* var obj1:dataGridScript = new dataGridScript();
                obj1.id = txtId.text;
                obj1.name = txtName.text;
                dp.addItem(obj1);
                */
            }
            [Bindable]
            public var dp:ArrayCollection = new ArrayCollection();
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:VBox height="100%" width="100%">
        <mx:HBox height="50%" width="50%">
            <mx:Form height="100%" width="100%">
                <mx:FormItem label="Id" >
                    <mx:TextInput id="txtId"/>
                </mx:FormItem>
                <mx:FormItem label="Name" >
                    <mx:TextInput id="txtName"/>
                </mx:FormItem>
            </mx:Form>
            <s:DataGrid dataProvider="{dp}">
                <s:columns>
                    <mx:ArrayList>
                       
                    <s:GridColumn dataField="id" />
                    <s:GridColumn dataField="name" />
                    </mx:ArrayList>
                </s:columns>
            </s:DataGrid>
        </mx:HBox>
        <mx:HBox height="50%" width="50%">
            <mx:Button id="btnSave" click="btnSave_clickHandler(event)"/>
        </mx:HBox>
    </mx:VBox>
   
</s:Application>