In this exercise you will use the DataGrid control to display employee data. You will also configure and format the control’s columns as shown in Figure 1.

Note: The DataGrid control is an MX component. There is no Spark component equivalent in Flex 4 beta.

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:

• Specify DataGrid control columns
• Format data in a DataGrid control
• Create reusable label functions

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_04_starter.zip (ZIP, 22 KB)
• ex5_04_solution.zip (ZIP, 22 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and skinning an application
• Exercise 2.4: Creating and skinning an application
• Exercise 4.3: Passing data to item renderers for display

Specifying DataGrid control columns

In this section, you will configure a DataGrid control so that it displays only the columns you define.

1. Download the ex5_04_starter.zip file if you haven't already and extract the file ex5_04_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_04_starter.fxp file.
4. Open EmployeeDirectory.mxml.
5. Locate the Label control below the UI components comment.

6. Below the Label control, create a DataGrid control:

   <s:Label text="Employee Directory" 
       color="#00748D"
       fontSize="24"/>
       
   <mx:DataGrid>
           
   </mx:DataGrid>
   

7. To the DataGrid control, bind employeeList as the dataProvider value and assign 100% as the width:

   <mx:DataGrid dataProvider="{employeeList}" 
       width="100%">
           
   </mx:DataGrid>

8. Save the file and run the application.

   You should see the DataGrid control is populated with employee data (see Figure 2).

   

   Figure 2. Run the application to see the DataGrid control populated with employee data.

9. Return to the EmployeeDirectory.mxml file in Flash Builder.

10. To the DataGrid control, reassign 200 as the width property value:

    <mx:DataGrid dataProvider="{employeeList}" 
        width="200">
            
    </mx:DataGrid>    

11. Between the DataGrid control tags, create a set of columns property tags:

    <mx:DataGrid dataProvider="{employeeList}" 
        width="200">
        <mx:columns>
                
        </mx:columns>
    </mx:DataGrid>
    

    Within the columns property you can define one or more DataGridColumn instances. Remember that the dataProvider property contains the data model for this component. The column displays are the view. In other words, all of the data is stored in the dataProvider property and you are merely defining which pieces are exposed via the columns.

12. Between the columns tag set, add a DataGridColumn control instance:

    <mx:DataGrid dataProvider="{employeeList}" 
        width="400">
        <mx:columns>
            <mx:DataGridColumn/>
        </mx:columns>
    </mx:DataGrid>

13. To the DataGridColumn control, assign lastName as the dataField and Last Name as the headerText:

    <mx:DataGridColumn dataField="lastName" 
        headerText="Last Name"/>

    The dataField property references the name of the property in the data model that you are displaying. The headerText property is the text that will appear at the top of the column.

14. Below the DataGridColumn control, create another DataGridColumn control and assign hireDate as the dataField and Hire Date as the headerText:

    <mx:DataGrid dataProvider="{employeeList}" 
        width="400">
        <mx:columns>
            <mx:DataGridColumn dataField="lastName" 
                headerText="Last Name"/>
            <mx:DataGridColumn dataField="hireDate" 
                headerText="Hire Date"/>
        </mx:columns>
    </mx:DataGrid>

15. Save the file and run the application.

    You should see the DataGrid control only displays the First Name and Last Name columns and information (see Figure 3).

    

    Figure 3. Run the application to see the DataGrid control populated with only employee last name and hire dates.

Formatting data in a DataGrid control

In this section, you will use a DateFormatter component to format the date within a DataGridColumn control.

1. Return to Flash Builder.
2. Locate the Declarations block.

3. Within the Declarations block, below the HTTPService component, create a DateFormatter tag.

   <fx:Declarations>
           
       <s:HTTPService id="employeeService" 
           url="data/employees.xml" 
           result="employeeList=employeeService.lastResult.employees.employee"/>	
   
       <mx:DateFormatter/>
      
   </fx:Declarations>

   The DateFormatter class affects the formatting of a visual element but is not a visual element itself, so is declared within the Declarations block.

4. To the DateFormatter tag, assign employeeDateFormatter as the id and DD-MM-YY as the formatString:

   <mx:DateFormatter id="employeeDateFormatter" 
       formatString="MM-DD-YY"/>

5. Below the UI components comment, locate the DataGrid control.

6. To the nested DataGridColumn tag with Date of Employment assigned as the headerText, assign dateFormat as the labelFunction:

   <mx:DataGrid dataProvider="{employeeList}" 
       width="200">
       <mx:columns>
           <mx:DataGridColumn dataField="lastName" 
               headerText="Last Name"/>
           <mx:DataGridColumn dataField="hireDate" 
               headerText="Hire Date" 
               labelFunction="dateFormat"/>
       </mx:columns>
   </mx:DataGrid>

   You will create the dateFormat function next. The function determines the text to be displayed in this column. For this example, you will use this function to format the date content.

7. Locate the Script block.

8. Within the Script block, below the employeeList variable declaration, create a private function named dateFormat and assign its return type to the String class:

   [Bindable]
   private var employeeList:ArrayCollection;
               
   private function dateFormat():String
   {
                   
   }
   

9. For the function, create a parameter named item and data type it to the Object class:

   private function dateFormat(item:Object):String
   {
                   
   }
   

   This function will be called for every row in the DataGrid control. Each time it is run, the DataGrid control passes all of the data in that one row to the function. In the step above you are naming that data item for use in the function. Remember that, by default, the DataGrid columns only displays the one data field that matches the dataField property. You can use this function, and the item property, to reference multiple data fields for display in the column.

10. For the function, create another parameter named hireDate and data type it to the DataGridColumn class:

    private function dateFormat(item:Object, hireDate:DataGridColumn):String
    {
                    
    }
    

    This second argument references the name of the DataGridColumn instance that calls this function.

11. Within the dateFormat() function, use the format() method of the employeeDateFormatter instance and a return statement to return a formatted version of the item.hireDate value for each employee along with the item.evaluation score:

    private function dateFormat(item:Object,hireDate:DataGridColumn):String
    {
        return employeeDateFormatter.format(item.hireDate) + ":" + item.evaluation;
    }

12. Save the file and run the application.

    The Hire Date column now displays the formatted date and the employee evaluation score (see Figure 4).

    

    Figure 4. Run the application to see the formatted date and employee evalution score.

Creating reusable label functions

In this section, you will make the label function reusable by applying the column parameter to a DataGridColumn control.

1. Return to Flash Builder.
2. Within the Script block, locate the dateFormat() function.

3. Within the function, replace the hireDate parameter with column and change the reference to the specific column to item[column.dataField]:

   private function dateFormat(item:Object,column:DataGridColumn):String
   {
       return employeeDateFormatter.format(item[column.dataField]) + ":" + item.evaluation;
   }

4. Save the file and run the application.

   You should see there is no change to the application (see Figure 5).

   

   Figure 5. Run the application to see there is no change.

Test your knowledge

In this exercise, you learned how to use and configure the DataGrid control. You also learned how to format the data within a DataGridColumn control and use the labelFunction property.

What control is used to specify a single column within a DataGrid control?

The DataGridColumn control.

Can a column in a DataGrid control ever display data from more than one data field?

Yes.

How do you apply a formatter to the text that is displayed in a DataGrid control column?

Apply the formatter to the data field from within a function defined in the labelFunction property of a DataGridColumn instance.

About the author