DataGrid

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#874040, #874040]">

 

    <mx:XMLList id="employees">

        <employee>

            <name>Christina Coenraets</name>

            <phone>555-219-2270</phone>

            <email>ccoenraets@fictitious.com</email>

            <active>true</active>

            <image>images/arrow_icon_sm.png</image>

        </employee>

        <employee>

            <name>Joanne Wall</name>

            <phone>555-219-2012</phone>

            <email>jwall@fictitious.com</email>

            <active>true</active>

        </employee>

        <employee>

            <name>Maurice Smith</name>

            <phone>555-219-2012</phone>

            <email>maurice@fictitious.com</email>

            <active>false</active>

        </employee>

        <employee>

            <name>Mary Jones</name>

            <phone>555-219-2000</phone>

            <email>mjones@fictitious.com</email>

            <active>true</active>

        </employee>

    </mx:XMLList>

    <mx:Panel title="DataGrid Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500"

         paddingTop="5" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="10" y="10">

        

         <mx:Label width="100%" color="0x323232"

            text="Select a row in the DataGrid control."/>

        <mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">

            <mx:columns>

                <mx:DataGridColumn dataField="name" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>

            </mx:columns>

        </mx:DataGrid>

        <mx:Form color="0x323232" width="100%" height="100%"  paddingTop="0" paddingBottom="0"  >

       

                   <mx:FormItem label="Name" paddingTop="0" paddingBottom="0">

                <mx:Label text="{dg.selectedItem.name}"/>

                </mx:FormItem>

                <mx:FormItem label="Email" paddingTop="0" paddingBottom="0">

                    <mx:Label text="{dg.selectedItem.email}"/>

                </mx:FormItem>

                <mx:FormItem label="Phone" paddingTop="0" paddingBottom="0">

                    <mx:Label text="{dg.selectedItem.phone}"/>

                </mx:FormItem>

        </mx:Form>

        

       

    </mx:Panel>

</mx:Application>