How to show data from two different elements in one column? - apache-flex

Question

How can I show data from two different elements in a single column? or if there is a way to combine two columns?
Like in following example just firstName is showing up. How can I display lastName with it too in the same column?
Folloing is the XML File 'which can't be changed':
<userEmail>
<user firstName="john" lastName="seena" />
<user firstName="pinku" lastName="phil"/>
</userEmail>
Code:
monitoringArray = event.result.userEmail.user;
.
.
.
<mx:DataGrid id="monDataGrid" x="10" y="10" dataProvider="{monitoringArray}">
<mx:columns>
<mx:DataGridColumn width="150" headerText="User Name" dataField="firstName"
</mx:columns>
</mx:DataGrid>

Answer 1

It definetely could be done by using labelFunction property of the DatagridColumn.
rough 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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private var xml:XML = <userEmail>
<user firstName="john" lastName="seena" />
<user firstName="pinku" lastName="phil"/>
</userEmail>
private function getCombinedUserNameLabel(item:Object, col:DataGridColumn):String
{
return item.#firstName + " " + item.#lastName;
}
]]>
</fx:Script>
<mx:DataGrid id="monDataGrid" x="10" y="10" dataProvider="{xml.user}">
<mx:columns>
<mx:DataGridColumn width="150" headerText="User Name" labelFunction="{getCombinedUserNameLabel}"/>
</mx:columns>
</mx:DataGrid>
EDIT: Arrays also shouldn't be a problem:
<?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"
creationComplete="application1_creationCompleteHandler(event)"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var xml:XML = <userEmail>
<user firstName="john" lastName="seena" />
<user firstName="pinku" lastName="phil"/>
</userEmail>;
private var monitoringArray:Array = [{firstName:"john", lastName:"seena"}, {firstName:"pinku", lastName:"phil"}];
private function getCombinedUserNameLabel(item:Object, col:DataGridColumn):String
{
return item.#firstName + " " + item.#lastName;
}
private function getCombinedUserNameLabel2(item:Object, col:DataGridColumn):String
{
return item.firstName + " " + item.lastName;
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:VGroup>
<mx:DataGrid id="monDataGrid" x="10" y="10" dataProvider="{xml.user}">
<mx:columns>
<mx:DataGridColumn width="150" headerText="User Name" labelFunction="{getCombinedUserNameLabel}"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid id="monDataGrid2" x="10" y="10" dataProvider="{monitoringArray}">
<mx:columns>
<mx:DataGridColumn width="150" headerText="User Name" labelFunction="{getCombinedUserNameLabel2}"/>
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Application>

Answer 2

I guess it cannot be done without changing the XML file. The datafield property can take only one string.
Here is the definition from adobe reference website.
dataField : String
The name of the field or property in the data provider item
associated with the column.

Answer 3

Complex columns in datagrids can be achieved with item renderers. You can see examples on the tour de flex app from adobe. Tour De Flex