Question

Here’s a self-contained application you can run that illustrates my question. When using a LinkButton in Flex spark DataGrid to display a clickable URL, the URL text that is displayed runs into it’s neighboring column if the URL’s column width becomes too short (i.e. possibly adjusted by user). If you run the code below, here’s what you’ll see:

Anyone know how to improve on this? Ideally the URL text would be truncated to fit within its column’s width and a tooltip would display whenever this truncation occurs (e.g. similar to a spark Label property showTruncationTip="true"). What do people do in practice?

<?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"
   minWidth="300" minHeight="300">
   <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="300" height="300"
      horizontalCenter="0" verticalCenter="0">
    <s:DataGrid id="sparkDataGrid"
        width="100%" height="100%"
        dataProvider="{siteList2}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="url" headerText="URL" width="150"  itemRenderer="myItemRenderer"/>
                <s:GridColumn dataField="name" headerText="Name"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
  </s:Panel>    
</s:Application>

And the file titled myItemRenderer.mxml (located in the same directory) is:

<?xml version="1.0" encoding="utf-8"?>
  <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" >

  <s:HGroup height="25" verticalAlign="middle" horizontalAlign="left">
    <mx:LinkButton label="{data.url}" 
       textDecoration="underline" 
       textRollOverColor="0x7777FF" 
       click="navigateToURL(new URLRequest(data.url))" 
       width="100%" 
       labelPlacement="left" 
       color="0x0000DD"/>       
  </s:HGroup>
</s:GridItemRenderer>

Answer 1

One way to improve on this–not truncate and show on tooltip as desired–is to set clipAndEnableScrolling to true in your GridItemRenderer.

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    clipAndEnableScrolling="true">

This will force the link to not exceed its allowed viewport, so the text won’t cover up your other column text. In a few minutes of experimentation I was not able to force it to truncate and show on tooltip.