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

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.

MainApplication.mxml

   1: <?xml version="1.0"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 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:"http://www.flexablecoder.com"},
   9:         {firstName:"Tariq",lastName:"Ahmed",url:"http://www.dopejam.com"}
  10:         ]);
  11: 
  12:     ]]>
  13: </mx:Script>
  14: 
  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>
  22: 
  23: </mx:Application>

urlRenderer.mxml

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:LinkButton xmlns:mx="http://www.adobe.com/2006/mxml"
   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
Keywords: