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.

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>

Advertisements

~ by mjcprasad2000 on May 11, 2009.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
%d bloggers like this: