Macromedia Flex Macromedia Flex
Adding a link/URL in a datagrid column

Jun 04, 2008 - Adding a link/URL in a datagrid column
How do you make a clickable link in a cell so that it loads up a URL

Question: "How I can add a cell with an hyperlink to each column of a datagrid so that clicking on the link will open a browser."

Answer: Use an Item Renderer to create a Component that will load up a given URL. The easiest way is to use the LinkButton Control.


   1: <?xml version="1.0"?>
   2: <mx:Application xmlns:mx="" backgroundColor="white" backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]">
   3: <mx:Script>
   4:     <![CDATA[
   5:         import mx.collections.ArrayCollection;    
   6:         [Bindable]
   7:         public var myAC:ArrayCollection = new ArrayCollection([
   8:         {firstName:"Jon",lastName:"Hirschi",url:""},
   9:         {firstName:"Tariq",lastName:"Ahmed",url:""}
  10:         ]);
  12:     ]]>
  13: </mx:Script>
  15: <mx:DataGrid id="dg" width="500" height="100" dataProvider="{myAC}">
  16:     <mx:columns>
  17:         <mx:DataGridColumn dataField="firstName" headerText="First Name"/>
  18:         <mx:DataGridColumn dataField="lastName" headerText="Last Name"/>
  19:         <mx:DataGridColumn headerText="URL" itemRenderer="urlRenderer"/>    
  20:     </mx:columns>    
  21: </mx:DataGrid>
  23: </mx:Application>


   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:LinkButton xmlns:mx=""
   3:                 label="Click On Me"
   4:                 click="navigateToURL(new URLRequest(data.url))"/>

   5: <P>

File Details
Created On Jun, 04, 2008 by Tariq Ahmed
Last Modified On Jun, 04, 2008 by Tariq Ahmed
Group: Tips and Articles
Flex Versions: 2.0
Category: Controls:Lists (eg DataGrid/Tile/Tree)
Type: Tip
Difficulty: Beginner