In this exercise you will use multiple methods to apply item editors and item renderers to a DataGrid control. One such example is shown in Figure 1.

Figure 1. Apply a NumericStepper component as a drop-in item editor for a DataGrid column.

In this exercise, you will learn how to:

• Use a drop-in item editor
• Make the editor a renderer
• Use an inline item renderer
• Use a component item renderer

Requirements

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

Flash Builder 4

• Download
• Learn more

Exercise files:

• ex5_05_starter.zip (ZIP, 24 KB)
• ex5_05_solution.zip (ZIP, 24 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and skinning an application
• Exercise 2.4: Formatting dates
• Exercise 4.3: Populating an application with data and handling faults

Using a drop-in item editor

In this section, you will use a NumericStepper as a drop-in item editor to change the employee evaluation score.

1. Download the ex5_05_starter.zip file if you haven’t already and extract the file ex5_05_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_05_starter.fxp file.
4. Open EmployeeDirectory.mxml.
5. Below the UI components comment, locate the DataGrid control.

6. Make the DataGrid control editable by assigning true as the editable value:

   <mx:DataGrid dataProvider="{employeeList}" 
       editable="true">
       <mx:columns>
           <mx:DataGridColumn dataField="lastName" 
              headerText="Last Name"/>
           <mx:DataGridColumn dataField="evaluation" 
              headerText="Evaluation"/>
       </mx:columns>
   </mx:DataGrid>

7. To the DataGridColumn control that is assigned to display the lastName data field of the employee data, assign false as the editable value:

   <mx:DataGrid dataProvider="{employeeList}" 
       editable="true">
       <mx:columns>
           <mx:DataGridColumn dataField="lastName" 
              headerText="Last Name" 
              editable="false"/>
           <mx:DataGridColumn dataField="evaluation" 
              headerText="Evaluation Score"/>
       </mx:columns>
   </mx:DataGrid>

   To make a DataGrid column editable, you must first make the entire DataGrid editable, and then turn off the editable option for the fields that should not be editable.

8. To the DataGridColumn control that displays the employee’s evaluation score, assign mx.controls.NumericStepper as the itemEditor class:

   <mx:DataGrid dataProvider="{employeeList}" 
       editable="true">
       <mx:columns>
           <mx:DataGridColumn dataField="lastName" 
              headerText="Last Name" 
              editable="false"/>
           <mx:DataGridColumn dataField="evaluation" 
              headerText="Evaluation Score"  
              itemEditor="mx.controls.NumericStepper"/>
       </mx:columns>
   </mx:DataGrid>

9. To the same DataGridColumn control, assign value as the editorDataField value:

   ...
   <mx:DataGridColumn dataField="evaluation" 
       headerText="Evaluation Score" 
      
   itemEditor="mx.controls.NumericStepper" 
       editorDataField="value"/>
   ...

   The editorDataField property references the property of the itemEditor class that should be used in this column display. For example, to display the value of a text field, the itemEditor property value would be mx.controls.TextInput and the editorDataField would be text. In this example, you are displaying the value property of the NumericStepper control.

10. Save the file.
11. Run the application.

12. Click on an employee evaluation score.

    You should see the NumericStepper control appear and let you change the employee evaluation score (see Figure 2).

    

    Figure 2. Click the employees evaluation score to see the NumericStepper control appear.

Making the editor a renderer

In the previous section, the NumericStepper control was only displayed when the user clicked a particular record in the column. This is because the control was applied only as an item editor. In this section, you will apply the control as both an item editor and a renderer.

1. Return to Flash Builder.
2. Locate the DataGrid control.

3. To the DataGridColumn control, change the itemEditor property to an itemRenderer property:

   <mx:DataGrid dataProvider="{employeeList}"
       editable="true">
       <mx:columns>
           <mx:DataGridColumn dataField="lastName" 
              headerText="Last Name" 
              editable="false"/>
           <mx:DataGridColumn dataField="evaluation" 
              headerText="Evaluation" 
              itemRenderer="mx.controls.NumericStepper" 
              editorDataField="value"/>
       </mx:columns>
   </mx:DataGrid>

4. To the same DataGridColumn control, assign true as the renderIsEditor property:

   ...
   <mx:DataGridColumn dataField="evaluation" 
       headerText="Evaluation" 
       itemRenderer="mx.controls.NumericStepper" 
       editorDataField="value" 
       rendererIsEditor="true"/>

5. Save the file and run the application.

   You should see the Evaluation column has the NumericStepper control applied to each evaluation score (see Figure 3).

   

   Figure 3. Run the application to see the NumericStepper control applied to every item in the Evaluation column.

Using an inline item renderer

In the previous sections, you applied the NumericStepper control as drop-in item editors and item renderers by simply referring to the class name in the itemEditor or itemRenderer properties. This limits your ability to specify any additional properties to that control.

In this section, you will apply the NumericStepper control to the DataGrid control column as an inline item renderer. This will allow you to put limits on the values that can be placed into the control.

1. Return to Flash Builder.
2. Locate the DataGrid control.
3. From the nested DataGridColumn control that creates the Evaluation column, delete the item renderer and rendererIsEditor properties and values.

4. Convert the DataGridColumn tag into a tag block:

   <mx:DataGrid dataProvider="{employeeList}"
       editable="true">
       <mx:columns>
           <mx:DataGridColumn dataField="lastName" 
              headerText="Last Name" 
              editable="false"/>
           <mx:DataGridColumn dataField="evaluation"
              headerText="Evaluation"
              editorDataField="value">
   
           </mx:DataGridColumn>
       </mx:columns>
   </mx:DataGrid>

5. Between the DataGridColumn control tags, create an itemEditor property tag block:

   <mx:DataGridColumn dataField="evaluation"
       headerText="Evaluation" 
       editorDataField="value">
       <itemEditor>
                                       
       </itemEditor>  
   </mx:DataGridColumn>

6. Between the itemRenderer tags, create a Component tag block:

   <mx:DataGridColumn dataField="evaluation"
       headerText="Evaluation" 
       editorDataField="value">
       <itemEditor>
           <fx:Component>
                                 
           </fx:Component>  
       </itemEditor>  
   </mx:DataGridColumn>

7. Between the Component tags, create a MX NumericStepper control instance:

   <fx:Component>
       <mx:NumericStepper/>
   </fx:Component>

8. To the NumericStepper control, assign 5 as the minimum and 9 as the maximum:

   <mx:NumericStepper minimum="5" maximum="9"/>

9. Save the file and run the application.

10. Select an employee evaluation score and click the up arrow button to increase the score as high as it can go. You should see that the NumericStepper control will only step up to the number 9 (see Figure 4).

    

    Figure 4. Change the employee evaluation value to the maximum.

11. Click the down arrow until the minimum number is displayed. You should see that the NumericStepper control will only step down to the number 5 (see Figure 5).

    

    Figure 5. Change the employee evaluation value to the minimum.

Using a component item renderer

If you have multiple item renderers for a DataGrid component instance, then the code can easily become unwieldy. In this section you will create an item renderer in a separate class file and then apply it to the DataGridColumn instance.

1. Return to Flash Builder.

2. From the Package Explorer view, right-click the src folder and select New > Folder (see Figure 6).

   

   Figure 6. Create a new folder.

3. In the New Folder dialog box, enter components for the Folder name (see Figure 7).

   

   Figure 7. Name the folder components.

4. Click Finish.

5. In the Package Explorer view, right-click the components folder and select New > MXML component (see Figure 8).

   

   Figure 8. Create a new MXML component.

6. In the New MXML Component dialog box, enter EvaluationDetail for the File name.
7. Base the component on the mx.containers.Box class.

8. Delete the Width and Height values.

   Your New MXML Component dialog box should look as shown in Figure 9.

   

   Figure 9. Name the component EvaluationDetail, base it on the Box container and remove the Width and Height values.

9. Click Finish.

10. In the EvaluationDetail.mxml file, to the opening Box tag, assign off as the horizontalScrollPolicy and verticalScrollPolicy and horizontal as the direction:

    <mx:Box xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
        horizontalScrollPolicy="off" 
        verticalScrollPolicy="off" 
        direction="horizontal">

11. Locate the Declarations tag block.
12. From the Declarations tag block, remove the generated code.

13. Between the Declarations tag block, create a DateFormatter component:

    <fx:Declarations>
        <mx:DateFormatter/>
    </fx:Declarations>

14. To the DateFormatter control, assign rendererDate as the id and MM-DD-YY as the formatString:

    <fx:Declarations>
        <mx:DateFormatter id="rendererDate"
    
            formatString="MM-DD-YY"/>
    </fx:Declarations>

15. Below the Declarations block, create a Label control:

    <fx:Declarations>
        <mx:DateFormatter id="rendererDate" 
           formatString="MM-DD-YY"/>
    </fx:Declarations>
        
    <s:Label/>

16. To the Label control, assign 5 as the paddingLeft and paddingTop, and the literal text Evaluation: followed by the data.evaluation value as the text property.

    <s:Label paddingTop="5" 
        paddingLeft="5" 
        text="Evaluation:{data.evaluation}"/>

17. Save the file.
18. Open the EmployeeDirectory.mxml file.
19. Locate the DataGrid control.
20. From between the DataGrid control tags, delete the itemEditor tag block from the second DataGridColumn control tag block.

21. To the second DataGridColumn control, assign components.EvaluationDetail as itemRenderer:

    <mx:DataGridColumn dataField="evaluation"
        headerText="Evaluation" 
        editorDataField="value" 
        itemRenderer="components.EvaluationDetail">
                  
    
    </mx:DataGridColumn>

22. Save the file and run the application.

    You should see the Evaluation column resembles Figure 10.

    

    Figure 10. Run the application to see the Evaluation column rendered by the component.

Test your knowledge

In this exercise, you learned how to use item editors and renderers with the DataGrid control.

Name three ways to apply an item renderer to a DataGridColumn instance.

Drop-in item renderer, inline item renderer, component item renderer.

What property nested within a DataGridColumn control is used to create an inline item editor?

The itemEditor property.

About the author