Datagrid in Flex

1.Frisr we start to create new mxml project for flex. to save dataxml.mxml
3.Usign httpservice we retrive the data & send data to server.
4.for display the data we use datagrid to display the records
5.To display specific fields in datagrid we use the columns to specify the fields to display
6.In httpservice we include the result funciton to retrieve the data in xml
7.paste the code in mxml & run the file.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=””  backgroundColor=”#ffffff” layout=”vertical” initialize=”employeeService.send()” >

import mx.collections.ArrayCollection;

// Variable to hold the results of the HTTPService call
private var employeeData:ArrayCollection;

// result event handler for employeeService HTTPService call
private function resultHandler(event:ResultEvent):void {
employeeData = event.result.employees.employee;
trace(“Data load success”);

// fault event handler for employeeService HTTPService call
private function faultHandler(event:FaultEvent):void {
// Add code here for what to do when there is an error retrieving data


<mx:HTTPService id=”employeeService”

<!– DataGrid displaying a subset of the data returned from the call to the server.–>
<mx:DataGrid dataProvider=”{employeeData}”
alternatingItemColors=”[#CCCCCC, #AAAAAA]”>
<mx:DataGridColumn dataField=”firstname”
headerText=”First Name” />
<mx:DataGridColumn dataField=”lastname”
headerText=”Last Name” />
<mx:DataGridColumn dataField=”title”
width=”250″ />
<mx:DataGridColumn dataField=”department”
width=”250″ />



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s