Flex Datagrid labelFunction query

Main.mxl

<s:DataGrid dataProvider="{employeeData}"> // employeeData is an Arraycollection with predefined data


        <s:typicalItem>
            <s:DataItem firstName="Christopher" 
                        lastName="Winchester" 
                        hireDate="22/12/2013"/>
        </s:typicalItem>


        <s:columns>

            <s:ArrayList>

                <s:GridColumn labelFunction="employeeName"
                              headerText="Name"/>

                <s:GridColumn dataField="hireDate"
                              headerText="Hire Date"
                              labelFunction="dateFormat"/>
            </s:ArrayList>

        </s:columns>


    </s:DataGrid>   


<fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var employeeData: ArrayCollection; 


            private function employeeName(item: Object, column: GridColumn): String
            {
                return item.firstName+" "+item.lastName;
            }


        ]]>
    </fx:Script>

A) Can anyone please explain me how does Datagrid internally works with employeeName function? I mean, Iam not even passing 2 parameters for labelFunction, BUT still how does it get called?

B) Why should I use s:ArrayList tag inside s:columns tag?

A) Can anyone please explain me how does Datagrid internally works with employeeName function? I mean, Iam not even passing 2 parameters for labelFunction, BUT still how does it get called?

The labelFunction is a property on the GridColumn class. Inside the Gridcolumn there is an itemToString() function which is used to determine what the label should be for that specific instance of the column. right out of the framework code:

/**
 *  @private
 *  Common logic for itemToLabel(), itemToDataTip().   Logically this code is
 *  similar to (not the same as) LabelUtil.itemToLabel().
 */
private function itemToString(item:Object, labelPath:Array, labelFunction:Function, formatter:IFormatter):String
{
    if (!item)
        return ERROR_TEXT;

    if (labelFunction != null)
        return labelFunction(item, this);

    var itemString:String = null;
    try 
    {
        var itemData:Object = item;
        for each (var pathElement:String in labelPath)
            itemData = itemData[pathElement];

        if ((itemData != null) && (labelPath.length > 0))
            itemString = (formatter) ? formatter.format(itemData) : itemData.toString();
    }
    catch(ignored:Error)
    {
    }        

    return (itemString != null) ? itemString : ERROR_TEXT;
}

B) Why should I use s:ArrayList tag inside s:columns tag?

Because the data type of the columns property on the DataGrid is an IList; and the ArrayList implements the IList interface. What you're looking at is the MXML way to create and define an ArrayList. You'd use a slightly different approach if you wanted to create the columns in ActionScript.