[flexcoders] Help with DataGrid dataField

[javaguru_uk]

Hello folks,

I am trying to bind a complex model to a DataGrid. I have modified the
employee.xml, just to illustrate what I am trying to do. Here is the code:

------------------------- begin code employees.xml ---------------

<?xml version="1.0" encoding="utf-8"?>
<employees>
    <employee>
        <name>
          <given>Christina</given> 
          <family>Coenraets</family>
        </name>
        <phone>555-219-2270</phone>
        <email>[EMAIL PROTECTED]</email>
        <active>true</active>
    </employee>
    <employee>
        <name>
          <given>Louis</given> 
          <family>Freligh</family>
        </name>
        <phone>555-219-2100</phone>
        <email>[EMAIL PROTECTED]</email>
        <active>true</active>
    </employee>
    <employee>
        <name>
          <given>Ronnie</given> 
          <family>Hodgman</family>
        </name>
        <phone>555-219-2030</phone>
        <email>[EMAIL PROTECTED]</email>
        <active>false</active>
    </employee>
    <employee>
        <name>
          <given>Joanne</given>
          <family>Wall</family>
        </name>
        <phone>555-219-2012</phone>
        <email>[EMAIL PROTECTED]</email>
        <active>true</active>
    </employee>
    <employee>
        <name>
          <given>Maurice</given> 
          <family>Smith</family>
        </name>
        <phone>555-219-2012</phone>
        <email>[EMAIL PROTECTED]</email>
        <active>false</active>
    </employee>
    <employee>
        <name>
          <given>Mary</given> 
          <family>Jones</family>
        </name>
        <phone>555-219-2000</phone>
        <email>[EMAIL PROTECTED]</email>
        <active>true</active>
    </employee>
</employees>

--------------------- end code ------------------------------

Now, what I want to do is have a DataGrid that will render the given
name, family name, phone and email. Here is how I tried to accomplish
this:

------------------ begin code DataGridSample.mxml ----------------

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>

    <mx:Model id="employeeModel" source="employees.xml"/>

    <mx:Label text="Click a row to see details"/>

    <mx:DataGrid id="dg" width="100%" height="100%"
        dataProvider="{employeeModel.employee}">
        <mx:columns>
            <mx:Array>
                <mx:DataGridColumn dataField="name.given"
headerText="Name"/>
                <mx:DataGridColumn dataField="name.family"
headerText="Surname"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:Array>
        </mx:columns>
    </mx:DataGrid>

    <mx:Form>
        <mx:FormItem label="Name">
            <mx:Label text="{dg.selectedItem.name.given}"/>
        </mx:FormItem>
        <mx:FormItem label="Surname">
            <mx:Label text="{dg.selectedItem.name.family}"/>
        </mx:FormItem>
        <mx:FormItem label="Email">
            <mx:Label text="{dg.selectedItem.email}"/>
        </mx:FormItem>
        <mx:FormItem label="Phone">
            <mx:Label text="{dg.selectedItem.phone}"/>
        </mx:FormItem>
    </mx:Form>

</mx:Application>

--------------------------- end code -------------------------

Now, why doesn't "name.given" and "name.family" work as dataFields? I
know the data is there because when I click on a DataGrid row, the
form below it shows the correct data. I am just trying to understand
why my data does not show in the DataGrid, and how do I solve this?

I look forward for an answer.

All the best,

Fidel.