DataGrid Control in Flex4

The DataGrid control is a MX component. There is no spark component.

The DataGrid control is a MX component. There is no spark component.

DataGrid control in Flex4:

The DataGrid control is a MX component. There is no spark component. DataGrid Control is like a Table in html. The DataGrid control has following features.
1. You can Re-Size, Sort and customize the column layout.
2. It has customizable column and row headers(optional).
3. It supports for paging.
You can use ArrayList or AvtionScript for creating a DataGrid Control. You will provide the data to DataGrid control by dataprovider property. The DataGrid is basically used for showing a data in table format.
The tag of DataGrid control is <mx:DataGrid>.

Example:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

private function gridinitialize():void {

data.dataProvider = [

{aName:'Bikrant', DOB:'01/01/1986',

City:'Delhi', State:'NewDelhi'},

{aName:'Brijesh', DOB:'15/07/1984',

City:'Noida', State:'Uttar Pradesh'},

{aName:'Gaurav', DOB:'27/06/1989',

City:'Mumbai', State:'Maharashtra'}

];

}

]]]>

</fx:Script>

<s:Panel title="DataGrid Control Example" width="/font>428" height="409">

<mx:DataGrid id="data"

initialize="gridinitialize()"

x="12" y="12"

borderColor="#000000"

borderStyle="solid"

chromeColor="#000000"

color="#90BB2A"

fontFamily="verdana"

fontGridFitType="pixel"

symbolColor="#FFFFFF"

textAlign="center"/&/>

<x:DataGrid x="12" y="195"

borderColor="#000000"

borderStyle="solid"

chromeColor="#790303"

color="#000000"

fontFamily="verdana"

fontGridFitType="pixel"

symbolColor="#FFFFFF"

textAlign="center">

<mx:ArrayList>

<fx:Object>

<fx:aName>Birant</fx:aName>

<fx:DOB>01/01/1986</fx:DOB>

<fx:City>Delhi</fx:City>

<fx:State>New Delhi</fx:State>

</fx:Object>

<fx:Object>

<fx:aName>Brijesh</fx:aName>

<fx:DOB>15/07/84</fx:DOB>

<fx:City>Noida</fx:City>

<fx:State>Uttar Pradesh</fx:State>

</fx:Object>

<fx:Object>

<fx:aName>Gaurav</fx:aName>

<fx:DOB>26/06/1989</fx:DOB>

<fx:City>Mumbai</fx:City>

<fx:State>Maharashtra</fx:State>

</fx:Object>

</mx:ArrayList>

</mx:DataGrid>

</s:Panel>

<</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads