Flex : How to display a DataGrid selectedItem’s details in a Form

apache-flex

Sorry for this long post. The question is however small but requires full detail. Thanks for reading and helping 🙂

I used HTTPService POST method to call a php file that returns me an xml type of result like

<user>
 <name>jones</name>
 <age>34</age>
</user>

This result is obtained after the php files queries a database. The database contain other information too like (height, gender, education and address)

Now i have a DataGrid (having two columns: NAME and AGE) and a Form below the DataGrid. I have displayed the above mentioned xml data in the DataGrid using the dataprovider="{userRequest.lastResult.User}" attribute.

I now want to use the itemclick=itemClickEvent(event) so that when a user click on a row of the DataGrid other information related to the clicked row like (height, gender, education etc) may appear in the form which is placed below the DataGrid in the GUI. For now my itemClickEvent, look like:

private function itemClickEvent(event:ListEvent):void
{
  clickRow.text=String(event.rowIndex);
   //Don't know what should i assign to following labels...
   //height.text=
   //gender.text=
   //edu.text=
}

Form's structure:

Is there any way i may access the xml data from the itemClickEvent function? given that the DataGrid structure header look like

<mx:DataGrid id="dgUserRequest" dataProvider="{userRequest.lastResult.user}" x="28.7" y="36" width="525" height="149" itemClick="itemClickEvent(event);">

and the HTTPService header look like

<mx:HTTPService id="userRequest" url="request.php" method=POST">
     <mx:request xmlns="">
       <getResult>send</getResult>
     </mx:request>
</mx:HTTPService>

The concerned part of my php file is:

if($_POST['getResult'] == 'send')
{
   $Result = mysql_query("SELECT * FROM userInfo" );
   $Return = "<userInfo>";
   while ( $row = mysql_fetch_object( $Result ) )
   {
     $Return .= "<user><name>".$row->name."</name><age>".$row->age."</age><height>". $row->height."</height><gender>". $row->gender."</gender><education>".$row->education."</education></user>";
   }
   $Return .= "</userInfo>";
   mysql_free_result( $Result );
   print ($Return);

}

Best Answer

If you are using userRequest.lastResult.user.name as the dataProvider for the data grid, what are your dataFields in the name and age columns?

There is another easy way to do this. Let's say the xml structure is something like:

<someRootTag>
 <user>
  <name>jones</name>
  <age>34</age>
  <height>180cm</height>
 </user>
 <user>
  <name>john</name>
  <age>4</age>
  <height>100cm</height>
 </user>
 <!--more <user/> tags-->
</someRootTag>

You can achieve this using data binding. Note that resultFormat of HTTPService has been changed to e4x from the default object

<mx:HTTPService id="service" url="data.xml" resultFormat="e4x"/>
<mx:DataGrid id="dg" dataProvider="{service.lastResult.user}">
    <mx:columns>
        <mx:DataGridColumn dataField="name"/>
        <mx:DataGridColumn dataField="age"/>
    </mx:columns>
</mx:DataGrid>
<mx:Form>
    <mx:FormItem label="Name">
        <mx:TextInput text="{dg.selectedItem.name}"/>
    </mx:FormItem>
    <mx:FormItem label="Age">
        <mx:TextInput text="{dg.selectedItem.age}"/>
    </mx:FormItem>
    <mx:FormItem label="Height">
        <mx:TextInput text="{dg.selectedItem.height}"/>
    </mx:FormItem>
</mx:Form>

The only AS code you need is to call service.send() from creationComplete of the application.

Related Topic