DataGrid in Flex:-

A DataGrid is a control in flex which is display data in the table format and also provide the property to edit in the table items and display via custom renderers. The main features of the DataGrid is that, you can resize the columns and modify the columns and set row header, editable and user can drag and drop capability.

In this Tutorial you can see how to create a DataGrid and what is the procedure to provide data by array collection.

Example:-

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

<mx:Panel width="420" height="300" title="DataGrid Panel">

<mx:DataGrid backgroundColor="green" borderColor="black" borderThickness="2" width="400" height="200" editable="true" selectable="true">

<mx:ArrayCollection>

<mx:Object>

<mx:state>Utter Pradesh</mx:state>

<mx:Distname>Kanpur</mx:Distname>

<mx:population>1000000</mx:population>

</mx:Object>

<mx:Object>

<mx:state>Utter Pradesh</mx:state>

<mx:Distname>Lucknow</mx:Distname>

<mx:population>900000</mx:population>

</mx:Object>

<mx:Object>

<mx:state>Utter Pradesh</mx:state>

<mx:Distname>Aligarh</mx:Distname>

<mx:population>800000</mx:population>

</mx:Object>

<mx:Object>

<mx:state>Madhya Pradesh</mx:state>

<mx:Distname>Bhopal</mx:Distname>

<mx:population>500000</mx:population>

</mx:Object>

<mx:Object>

<mx:state>Rajasthan</mx:state>

<mx:Distname>JaiPur</mx:Distname>

<mx:population>1500000</mx:population>

</mx:Object>

</mx:ArrayCollection>

<mx:columns>

<mx:DataGridColumn dataField="state" />

<mx:DataGridColumn dataField="Distname" />

<mx:DataGridColumn dataField="population" />

</mx:columns>

</mx:DataGrid>

</mx:Panel>

Output:-

Related Tags for Flex DataGrid control: