We have a datagrid that is using an item renderer that consists of an HBox implementing IDropInListItemRenderer with a few components in it. One of these components is a Text component used so some text can be wrapped.
The problem is there are a few cases were the datagrid does not seem to size the cell properly to the item renderer. The easiest case to demonstrate is sorting the datagrid. The datagrid renders fine when first loaded but if a column is sorted the row heights no longer are variable, they are all the same height. Is there something else that needs to be in the item renderer? Here's some simplified code that demonstrates the problem (run it, then sort the columns to see the issue): <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var dataSet:ArrayCollection = new ArrayCollection([{item:1, text:"Some text"}, {item:2, text:"Some really long text that should wrap."}]); ]]> </mx:Script> <mx:DataGrid dataProvider="{dataSet}" variableRowHeight="true" width="200"> <mx:columns> <mx:DataGridColumn dataField="item"/> <mx:DataGridColumn dataField="text" itemRenderer="MyRenderer"/> </mx:columns> </mx:DataGrid> </mx:Application> <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer" > <mx:Text id="myText" width="100%"/> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridListData; import mx.controls.listClasses.BaseListData; import mx.events.FlexEvent; [Bindable("dataChange")] private var _listData:BaseListData; public function get listData():BaseListData { return _listData; } public function set listData (value:BaseListData):void { _listData = value; dispatchEvent(new FlexEvent (FlexEvent.DATA_CHANGE)); } override protected function updateDisplayList (w:Number, h:Number):void { super.updateDisplayList(w, h); if (data != null ) { var ld:DataGridListData = DataGridListData(_listData); myText.text = ld.label; } } ]]> </mx:Script> </mx:HBox>