Category Archives: Flex

Datagrid in Flex

1.Frisr we start to create new mxml project for flex.
2.name 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=”http://www.adobe.com/2006/mxml”  backgroundColor=”#ffffff” layout=”vertical” initialize=”employeeService.send()” >

<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

// Variable to hold the results of the HTTPService call
[Bindable]
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:Script>

<mx:HTTPService id=”employeeService”
url=”data/employees.xml”
result=”resultHandler(event)”
fault=”faultHandler(event)”/>

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

</mx:Application>