Search code examples
apache-flexflex4flex3flex-spark

How to show a datatip in a column when the text is truncated in mx DataGrid?


Is there a way to show a tool tip over a cell when the text is truncated in an mx DataGrid? If not in mx DataGrid I'm interested in Spark but I will have to convert so that's a last resort.

Update
There is a way show a tip conditionally. If you create a dataTipFunction and then if you return null it won't show a tool tip. So, theoretically I could get the length of the text, and see if it is over a certain amount and if it is then return the text and if it isn't This would not be accurate because if the text contains 5 "i" characters it would be much shorter than 5 "m" characters as you can see in the text below:

iiiii
mmmmm


Solution

  • If you are interested in a spark solution, here is my example. Use a magic property of spark Label "showTruncationTip".

    enter image description here

    <?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="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
    
            [Bindable]private var collection:ArrayCollection = new ArrayCollection([
                {field01:"field01", content:"your content", field02:"field02"},
                {field01:"field01", content:"your content your content your content your content", field02:"field02"},
                {field01:"field01", content:"your content your content your content your content", field02:"field02"}
            ]);
        ]]>
    </fx:Script>
    
    <s:DataGrid
        x="10" y="10"
        width="320" height="120" 
        dataProvider="{collection}">
    
        <s:columns>
            <s:ArrayList>   
                <s:GridColumn dataField="field01" headerText="Field 1"/>
                <s:GridColumn dataField="content" headerText="Content" width="120">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:HGroup width="100%" height="100%" verticalAlign="middle" paddingLeft="8">
                                    <s:Label text="{data.content}" width="100%" maxDisplayedLines="1" showTruncationTip="true"/>
                                </s:HGroup>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn dataField="field02" headerText="Field 2" width="100"/>
            </s:ArrayList>                  
        </s:columns>                
    </s:DataGrid>
    </s:Application>