Problem using TruncateToFit for a Label inside a column of DataGrid

I am having this problem using the dataGrid in flex. I have a Label in one of the columns of the datagrid, and the label has the truncateToFit property True. But it is not working.

At first I had a static width to Label, and it works in that case. But the problem using that is, when I change the wide of the column, in the output, it does not changes the width of label, and if I make the column width small, the label wont get truncated.

Using 100% width for the label, does not helps either.

My datagrid code looks like below given code:

<mx:AdvancedDataGrid id="user_files_list" width="100%" height="100%" 
                    top="0" left="0" dragEnabled="true" dragM开发者_开发百科oveEnabled="true"
                    dataProvider="{fm_model.user_files_list}" 
                    allowMultipleSelection="true" borderStyle="solid" rowHeight="45">
                    <mx:columns>            
                    <mx:DataGridColumn id="col2" sortable="true" headerText="Type" width="120"
                            headerStyleName="datagridHeader" dataField="content_type">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:Canvas width="100%" height="100%" verticalScrollPolicy="off"  borderThickness="2" borderStyle="solid" horizontalScrollPolicy="off">
                                            <mx:Label width="100%" text="{'tag' == data.content_type?'File Folder':
                                            outerDocument.getText(data.name)}" truncateToFit="true" styleName="labelStyle"
                                            verticalCenter="0" />   
                                    </mx:Canvas>                                        
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>

Regards Zeeshan

Ok.. well I'm not sure why this doesn't work... Adobe's docs say "This property can be used as the source for data binding" but binding directly to col2.width was not working http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/advancedDataGridClasses/AdvancedDataGridColumn.html#width

.... But, you should be able to just bind to the columns width. The Bindings seem to not be getting updated properly so... instead I'm using an enter Frame handler to update a public variable that the label's width is bound to. Although this is a work-around, it ensures that the width is updated.

Let me know if this helps... cheers

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                enterFrame="application1_enterFrameHandler(event)">
    <mx:Script>
        <![CDATA[

            [Bindable]
            public var colWidth:Number;

            protected function application1_enterFrameHandler(event:Event):void
            {
                colWidth = col2.width;
            }

        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id="user_files_list" width="100%" height="100%" 
                         top="0" left="0" dragEnabled="true" dragMoveEnabled="true"
                         dataProvider="{[{content_type:'sad asde asd asd asdasd.l;k;asd ;lsd asd;alsd;asd asdasd asdkasd' +
                             'asdad asdasd asdasd asdasdasdasdasd asdasd asda sdasda sdasd aa sdasd asdasdasd asd asdasd' +
                             'asdd asdasd asda sda sda sdasdasda d asd a sd a sd a sd a sdasdasd a sdasdasd asdasdasd as' +
                             'jkhkhkjhkjh Gold Diamond, Gold Chain!'},{content_type:'Hello\''}, {content_type:'World'}]}" 
                         allowMultipleSelection="true" borderStyle="solid" rowHeight="45">
        <mx:columns>            

            <mx:AdvancedDataGridColumn id="col2" sortable="true" headerText="Type" width="120"
                               headerStyleName="datagridHeader" dataField="content_type">
                <mx:itemRenderer>

                    <mx:Component>
                        <mx:Canvas width="100%" height="100%" verticalScrollPolicy="off"  borderThickness="2" borderStyle="solid" horizontalScrollPolicy="off">
                            <mx:Label width="{mx.core.Application.application.colWidth}"
                                    text="{data.content_type}" truncateToFit="true" styleName="labelStyle"
                                      verticalCenter="0" />   
                        </mx:Canvas>                                        

                    </mx:Component>

                </mx:itemRenderer>

            </mx:AdvancedDataGridColumn>
            <mx:AdvancedDataGridColumn width="200"/>
        </mx:columns>

    </mx:AdvancedDataGrid>
</mx:Application>

An elegant way to specify the width would be

theText.width = AdvancedDataGrid(handle.owner).columns[handle.columnIndex].width;

where

var handle:AdvancedDataGridListData = AdvancedDataGridListData(listData);

So the item renderer can be reused, instead of tying to specific column with hard-code.

I was able to get it to work by setting minWidth="1" on the label, as well as setting width="100%".

minWidth was getting set to the full length of the label and that was stopping the parent sizing it correctly.

Note: I also had to set textAlign="left" to preserve my style, that might not apply in your case.

You can keep the static width and set the attribute variableRowHeight=true and wordWrap=true in the AdvancedDataGrid tag. Hope this works!