Adding a link/URL in a datagrid column

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>

~ by mjcprasad2000 on May 11, 2009.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: