Adding links to MX and Spark DataGrids using inline item renderers

While working on a recent project, I couldn’t find examples of adding inline links to the Spark and MX DataGrids. There were lots of examples of item renderers, but nothing that did exactly what I wanted: just a hyperlink in the DataGrid cell.

Below are two examples: one shows the Spark DataGrid and the other shows the MX DataGrid with inline links.

There are some subtle differences between how to define an inline item renderer. There are also some subtleties to the way you define the links. I’ll let the code speak for itself, but note that there are some things to keep in mind:

  • The cursor changes to a hand when you mouse over the link (without embedding a new cursor image or invoking the CursorManager)
  • The links are styled blue and underlined like real web links
  • For the MX DataGrid, it’s mx:DataGridColumn > mx:itemRenderer > fx:Component > mx:Label
  • For the Spark DataGrid, it’s s:GridColumn > s:itemRenderer > fx:Component > s:GridItemRenderer > s:Label
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Declarations>
        <!-- Define the data -->
        <fx:XMLList id="siteList">
            <site>
                <name>IMDB</name>
                <url>http://www.imdb.com</url>
            </site>
            <site>
                <name>BoardgameGeek</name>
                <url>http://www.boardgamegeek.com</url>
            </site>
            <site>
                <name>Yahoo! Finance</name>
                <url>http://finance.yahoo.com</url>
            </site>
        </fx:XMLList>
        <!-- Use an XMLListCollection for the Spark DataGrid -->
        <s:XMLListCollection id="siteList2" source="{siteList}"/>
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <s:Panel title="Spark DataGrid Links"
             width="75%" height="75%" 
             horizontalCenter="0" verticalCenter="0">
            <s:DataGrid id="sparkDataGrid" 
                        width="100%" height="100%" 
                        dataProvider="{siteList2}">
                <s:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="name" headerText="Name"/>
                        <s:GridColumn dataField="url" headerText="URL">
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:GridItemRenderer>                                  
                                        <s:Label text="{data.url}" 
                                            color="0x336699" 
                                            verticalCenter="0" paddingLeft="5" 
                                            textDecoration="underline" 
                                            buttonMode="true" 
                                            click="navigateToURL(new URLRequest(data.url))"/>
                                    </s:GridItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>                 
                        </s:GridColumn>
                    </s:ArrayList>
                </s:columns>      
            </s:DataGrid>
    </s:Panel>

    <s:Panel title="MX DataGrid Links"
             width="75%" height="75%" 
             horizontalCenter="0" verticalCenter="0">
        <mx:DataGrid id="mxDataGrid" 
                     width="100%" height="100%" 
                     dataProvider="{siteList}">
            <mx:columns>
                <mx:DataGridColumn headerText="Name" dataField="name"/>
                <mx:DataGridColumn headerText="URL" dataField="url">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:Label text="{data.url}" 
                                      textDecoration="underline" 
                                      color="0x336699" 
                                      buttonMode="true" 
                                      useHandCursor="true" 
                                      mouseChildren="false"
                                      click="navigateToURL(new URLRequest(data.url))"/>
                        </fx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>              
            </mx:columns>
        </mx:DataGrid>
    </s:Panel>    
</s:Application>