0 Replies Latest reply on Mar 23, 2010 12:12 PM by klrstu

    AdvancedDataGrid headerrenderer children added dynamically do not display


      The AdvancedDataGrid in Flex 3.x does not correctly render children of a custom headerrenderer when the children are added dynamically. This works correctly with the DataGrid.


      An AdvancedDataGrid has a custom headerrenderer with one field to display the column header text.

      A show button below the grid adds a text input field in the header below the column text in the header.

      When the show button is selected, the AdvancedDataGrid header sizes correctly to leave space for the field but does not display the field.


      If I drag the column, the text input field displays as I am dragging. See the 3 images below.


      I have included the 3 source files. What is the correct way to dynamically add children to an AdvancedDataGrid header?



      1. AdvancedDataGrid with only the column header text:


      2. After Show is selected, the header is sized for the text field below:


      3. Only dragging the column header temporarily shows the text field:



      1. TestGrid.mxml



      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onInit(event)" width="100%" height="100%">



           protected function onInit(event:Event):void {

                var cols:Array = grid.columns;

                var colWidth:int = grid.width;

                var col:AdvancedHeaderColumn = new AdvancedHeaderColumn();

                col.wordWrap = true;

                col.show = false;

                var headerRenderer:ClassFactory = new ClassFactory(AdvancedHeaderLabel);

                // Add any custom properties

                headerRenderer.properties = {text: "Column1 header that wraps", dataGridColumn: col};

                col.headerRenderer = headerRenderer;

                col.headerWordWrap = true;


                grid.columns = cols;

                grid.measuredWidth = colWidth;



           protected function showText(event:Event):void {

                var cols:Array = grid.columns;

                for each (var col:AdvancedHeaderColumn in grid.columns) {

                     col.show = show.selected;


                grid.columns = cols;




           <mx:AdvancedDataGrid id="grid" height="100%" width="100%" variableRowHeight="true" editable="true" lockedColumnCount="1"/>

           <mx:Button label="Show" id="show" click="showText(event)" selected="false" toggle="true"/>




      2. AdvancedHeaderLabel.mxml


      <?xml version="1.0" encoding="utf-8"?>

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalScrollPolicy="off">




           import mx.controls.TextInput;

           import mx.core.UITextField;


           // properties

           public var text:String;

           public var dataGridColumn:AdvancedHeaderColumn;


           // Column header

           public var textField:UITextField;

           // Optional text input field

           public var textInput:TextInput;


           override protected function createChildren():void {


                // Always add the header text

                textField = new UITextField();

                textField.text = text;

                textField.multiline = true;

                textField.wordWrap = true;

                textField.percentWidth = 100;

                addChildAt(textField, 0);



           override protected function commitProperties():void {


                // Add the text input field?

                if (dataGridColumn && dataGridColumn.show && !textInput) {

                     textInput = new TextInput();





           override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

                super.updateDisplayList(unscaledWidth, unscaledHeight);

                // Position and size the textInput field

                if (dataGridColumn.show && textInput) {

                     textInput.y = textField.getExplicitOrMeasuredHeight();

                     textInput.setActualSize(unscaledWidth, textInput.getExplicitOrMeasuredHeight());




           override protected function measure():void {


                measuredWidth = textField.getExplicitOrMeasuredWidth();

                measuredHeight = textField.getExplicitOrMeasuredHeight();

                // Make room for the text input field

                if (textInput) {

                     measuredHeight += textInput.getExplicitOrMeasuredHeight();





           <mx:VBox height="100%" width="100%" id="box" verticalAlign="bottom"/>



      3. AdvancedHeaderColumn.as


      package {

           import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;


           public class AdvancedHeaderColumn extends AdvancedDataGridColumn {

                public var show:Boolean = false;

                public function AdvancedHeaderColumn(columnName:String=null) {