Datagrid component using XML as the dataprovider.
This is adding the dataprovider to the datagrid using actionscript.
private function init():void{
compDataGrid.dataProvider=computers;//adding the dataprovider to the datagrid
}Creating an xmllist component using MXML. Then adding that to the datagrid component.
<mx:XMLList id="computers">
<computer>
<brand>Dell</brand>
<type>Desktop</type>
<cpu>2.7GHz</cpu>
<price>$2199.99</price>
</computer>
<computer>
<brand>Sony Vaio</brand>
<type>Desktop</type>
<cpu>3.0GHz</cpu>
<price>$1799.99</price>
</computer>
<computer>
<brand>Acer</brand>
<type>Laptop</type>
<cpu>2.1GHz</cpu>
<price>$1599.99</price>
</computer>
</mx:XMLList>
<mx:HBox>
<mx:DataGrid rowCount="3" id="compDataGrid">
<mx:columns>
<mx:DataGridColumn dataField="brand" headerText="Brand" />
<mx:DataGridColumn dataField="type" headerText="Type" />
<mx:DataGridColumn dataField="cpu" headerText="CPU" />
<mx:DataGridColumn dataField="price" headerText="Price" />
</mx:columns>
</mx:DataGrid>
<mx:Panel title="Select an item from the list" color="0xffffff">
<mx:Form color="0x000000">
<mx:FormItem label="Brand:">
<mx:Label text="{compDataGrid.selectedItem.brand}" />
</mx:FormItem>
<mx:FormItem label="Type:">
<mx:Label text="{compDataGrid.selectedItem.type}" />
</mx:FormItem>
<mx:FormItem label="Cpu:">
<mx:Label text="{compDataGrid.selectedItem.cpu}" />
</mx:FormItem>
<mx:FormItem label="Price:">
<mx:Label text="{compDataGrid.selectedItem.price}" />
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:HBox>