How to display result of query to custom cell of DataGrid [Flex]

Question

I followed this guide to display data from mysql database: http://www.flashrealtime.com/flash-builder-4-and-php-data-services/

But what to do if i have datagrid like this:

<mx:DataGrid id="dataGrid" width="100%" height="100%" creationComplete="dataGrid_creationCompleteHandler(event)" >
   <mx:columns>
      <mx:DataGridColumn id="something" dataField="customerId" editable="false">
         <mx:itemRenderer > 
            <mx:Component>
              <mx:VBox>
               <mx:Label id="l1" text=???????  ></mx:Label>
               <mx:Label id="l2" text=???????  ></mx:Label>
              </mx:VBox>
            </mx:Component>
          </mx:itemRenderer>
      </mx:DataGridColumn>

Answer 1

When using an itemRenderer in a DataGrid, the value of the entire "row" is stored in the "data" object

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection([
                {id : "1", name : "Bob"},
                {id : "2", name : "Andrew"},
                {id : "3", name : "Paul"}
            ]);

        ]]>
    </fx:Script>

    <mx:DataGrid dataProvider="{dp}">
        <mx:columns>
            <mx:DataGridColumn>
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:VBox>                           
                            <mx:Label text="{data.id}"/>
                            <mx:Label text="{data.name}"/>
                        </mx:VBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

</s:WindowedApplication>