Problem linking datagrid to text Input - apache-flex

Question

What I am trying to do is have a user input his data into multiple textboxes, then once the data is entered it is displayed on the datagrid at runtime. The problem is when I run the app I click my button but no information entered is added to datagrid. My textboxes are also supposed to clear once the button is pressed but again nothing happens. Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var dgItems:ArrayCollection;
[Bindable]public var temp:Object;
public function addItem(evt:Event):void {
//add item if the text input fields are not empty
if(name_input.text != ""&& location_input.text !="") {
//create a temporary Object
temp = myDG.selectedItem;
var temp:Object = new Object();
//add the text from the textfields to the object
temp = {name:name_input.text, location:location_input.text};
//this will add the object to the ArrayColldection (wich is binded with the DataGrid)
dgItems.addItem(temp);
//clear the input fields
name_input.text = "";
location_input.text ="";
}
}
]]>
</mx:Script>
<mx:DataGrid x="97" y="110" dataProvider="{dgItems}" id="myDG">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="name:"/>
<mx:DataGridColumn headerText="Column 2" dataField="location:"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="97" y="51" label="add" click="addItem(event)"/>
<mx:TextInput x="117" y="300" id="location_input"/>
<mx:TextInput x="117" y="340" id="name_input"/>
</mx:Application>
Any help is greatly appreciated.

Answer 1

Your code has lots of errors. First, you were not initializing the dgItems array collection, so it's value was null. You would get errors when you tried to "addItem" to the null object.
Second you were trying to access the selectedItem of the dataGrid before initializing the DataGrid's ArrayCollection dataProvider. No items in the list, there can be no selectedItem.
Third, you're creating the new object twice; once with the 'new Object' line and again with
the in-line syntax for defining ojects: '{}
Fourth, the datafield properties on the DataGridColumn both had colons in them, but the object's properties did not.
I hope this helps.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// array collection was never initialized; you can't items to a null object
[Bindable]private var dgItems:ArrayCollection = new ArrayCollection();
// not needed
// [Bindable]public var temp:Object;
public function addItem(evt:Event):void {
//add item if the text input fields are not empty
if(name_input.text != ""&& location_input.text !="") {
//create a temporary Object
// this line of code serves no purpos
// temp = myDG.selectedItem;
var temp:Object // = new Object();
//add the text from the textfields to the object
temp = {name:name_input.text, location:location_input.text};
//this will add the object to the ArrayColldection (wich is binded with the DataGrid)
dgItems.addItem(temp);
//clear the input fields
name_input.text = "";
location_input.text ="";
}
}
]]>
</mx:Script>
<mx:DataGrid x="97" y="110" dataProvider="{dgItems}" id="myDG">
<mx:columns>
<!-- need to remove the colons from the data field -->
<mx:DataGridColumn headerText="Column 1" dataField="name"/>
<mx:DataGridColumn headerText="Column 2" dataField="location"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="97" y="51" label="add" click="addItem(event)"/>
<mx:TextInput x="117" y="300" id="location_input"/>
<mx:TextInput x="117" y="340" id="name_input"/>
</mx:Application>
Many of these errors were easy to catch as soon as I launched the debugger. If you aren't already using it, I suggest doing some reading up on it.