Customizing Flex DataGrid with ItemRenderer

In this example I will be using an ArrayCollection as the data provider for the DataGrid. The ArrayCollection is of objects that represent web sites. Each object contains a Name and a URL. The data will be displayed with some customization. The customization include color, decoration, and action. Each of the items displayed will be linkable to the appropriate web site.

• Define the DataGrid Control
  

  
  
  
  
  
  
     
  
           
  
                      rollOver="setStyle('textDecoration','underline')"
  
               rollOut="setStyle('textDecoration','none')"
  
               useHandCursor="true" buttonMode="true"
  
               mouseChildren="false"
  
               click='navigateToURL(new URLRequest(data.URL),"_mine")'
  
        
  
      
  
     
  
   
  
  
  
  
  
  

  
  data refers the object being rendered. So, data.Name refers the the instance data Name within the object. Here the item renderer defines each item from the site list as a label. The label is then styled as follows:
  
  
  
  • The text is assigned the color #009ad4
  
  
  • Text is underlined when the cursor is placed on it and removed when rolled out.
  
  
  • It uses the hand cursor for the mouse
  
  
  • When text is clicked it calls navigateToURL method to launch the web site. If click event is calling a method defined in your file, you need to qualify the call withouterDocument to bring the functions within scope. For example, 
    

    click='outerDocument.myFunction(data.URL)'