CODEWITHSUNDEEP
apache-flexflex4flex3flex-spark
1.21 gigawatts
1.21 gigawatts

Reputation: 17736

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

Upvotes: 1

Views: 1412

Answers (1)

Anton
Anton

Reputation: 4684

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>

Upvotes: 4

Related Questions