Truncated datagrid column in Flex

I was looking for a way to get some of my datagrid fields nicely truncated because some where to long but also because the window is completely scalable. Since I had to use itemrenders anyway I thought I just could set the truncateToFit property of a label in an itemrender. But when the datagrid is resized it does not automaticly resize the renders.

So this is what I came up with:

Actionscript:
  1. <!-- On resize call the function setSize() -->
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off" resize="this.setSize()">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             public function setSize():void{
  7.                 this.latin_txt.width = this.width;
  8.             }
  9.         ]]>
  10.     </mx:Script>
  11.    
  12.     <!-- set truncateToFit on true. If you use it with a Text Component it will not display the '...' but will truncate on each word -->
  13.     <mx:Label id="latin_txt" text="{data.latin}" truncateToFit="true"/>
  14.  
  15. </mx:Canvas>

Here is a example and source. Try to resize the columns and window.

view, source


10 Comment(s)

  1. On Oct 24, 2007, Niels Bruin said:

    Very nice feature!

  2. On Oct 29, 2007, Ruben Swieringa said:

    Neat! Nice and subtle..

  3. On Nov 15, 2007, William Gregoire said:

    Thanks! I mod it with
    this.latin_txt.width = this.width - this.getStyle("paddingLeft") - this.getStyle("paddingRight") ;
    to make it works anywhere

  4. On Apr 3, 2008, Santosh Shenoy said:

    I set the itemRenderer attribute of the DataGridColumn element to "mx.controls.Label" to get the truncation effect.

  5. On Apr 3, 2008, Gerben Robijn said:

    Great option Santosh! I will update the example with your option if you wont mind. Get them all 3 in a row

  6. On Apr 4, 2008, Santosh Shenoy said:

    Just a minor addition....

    If the same truncation effect is desired for the column headers as well, set the headerRenderer attribute of the DataGridColumn element to "mx.controls.Label".

  7. On Dec 8, 2008, Luciano said:

    truncateToFit its by default true. An easier way to truncate is:

    Its a know bug that truncateToFit doesnt support percent widths, minWidth will work around this bug!

  8. On Mar 26, 2009, Julio said:

    Thanks! worked perfectly, just had to adjust the sizes to prevent the vbar forcing the hbar to appear since the vbar made the component a little bit wider.

  9. On May 13, 2009, Roberto said:

    Using mx.controls.Label isn't correct. DataGridItemRenderer "supports" the DataGrid selectionColor style, what you don't have anymore using Label(s)

  10. On Mar 23, 2010, oden said:

    I just tried this item renderer with datagrid which has 300 rows and datagrid scrolling is very-very slow. Any ideas why?

Post a Comment