How to fix a DataGrid headercolumn's headerText causing sizing problems

Question

Hello,
I have a datagrid with filter textboxes underneath the header columns.
My problem is that some of the headerText is rather large (in 2 of my columns), and causes it to wrap and stretch the header's height, which ultimately causes the columns to match up strangely and not in uniform.
Here is a screenshot of the problem:
http://img685.imageshack.us/img685/2283/gridcolumnsizeproblem.png
How can I make all column headings uniform in size, with my filtering text boxes? I do not see a height property. I have tried to add extra spaces in the smaller column headings but that does nothing as I think FLEX parses that out. Can I specifically size these so they match the longer ones?
Keep in mind, this DataGrid uses a custom renderer.
Here is my grid definition/MXML:
            <dataGridFilters:FilterDatagrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{deviceDataColl}" click="dg_clickHandler(event)" >
                <dataGridFilters:columns>
                    <dataGridFilters:DataGridFilterColumn dataField="name" headerText="Name" width="150"/>
                    <!--<dataGridFilters:DataGridFilterColumn dataField="deviceType" headerText="Device Type" textAlign="right"/>-->
                    <dataGridFilters:DataGridFilterColumn dataField="tHeat"   headerText="Heat Point" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="tCool" headerText="Cool Point" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="tIndoor" headerText="Indoor Temp" width="80" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="tOutdoor" headerText="Outdoor Temp" width="90" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="insideHumidity" headerText="Indoor Humidity" width="100"  textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentFState" headerText="Fan State" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentFMode" headerText="Fan Mode"  width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentTState" headerText="State" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="currentTMode" headerText="Mode" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="nextSchedCPTDate" headerWordWrap="false" headerText="Next Scheduled Control Point Transition Date" width="100" textAlign="right"/>
                    <!--<dataGridFilters:DataGridFilterColumn dataField="nextSchedCPTTime" headerText="Next Scheduled Control Point Transition Time" width="100" textAlign="right"/>-->
                    <dataGridFilters:DataGridFilterColumn dataField="nextSchedCPTTemp" headerWordWrap="false" headerText="Next Scheduled Control Point Transition Temp" width="100" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="groupOne" headerText="Group 1" width="75" textAlign="right"/>
                    <dataGridFilters:DataGridFilterColumn dataField="groupTwo" headerText="Group 2" width="75" textAlign="right"/>                   
                </dataGridFilters:columns>
            </dataGridFilters:FilterDatagrid>
Any help is greatly appreciated!
Thank you,
Devtron

Answer 1

Rootsounds,
Here is my headerRenderer class:
package filters.header
    import mx.controls.dataGridClasses.DataGridHeader;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class DataGridFilterHeader extends DataGridHeader
        public function DataGridFilterHeader()
            super();
         *re-position the sort icon
        override protected function placeSortArrow():void
            super.placeSortArrow();
            if(sortArrow)
                var hh:Number = cachedHeaderHeight;
                sortArrow.y = (hh - sortArrow.measuredHeight - 8) > 0 ? 10: 0;
                if(sortArrow.visible)
                    var n:int = headerItems.length;
                    for (var i:int = 0; i < n; i++)
                        if(visibleColumns[i].colNum == dataGrid.sortIndex)
                            headerItems[i].setActualSize(visibleColumns[i].width - sortArrow.measuredWidth + 5, headerItems[i].height);
Here is my dataGrid extender:
package filters
    import filters.header.DataGridFilterHeader;
    import flash.events.Event;
    import mx.collections.ICollectionView;
    import mx.controls.DataGrid;
    import mx.controls.dataGridClasses.DataGridColumn;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class FilterDatagrid extends DataGrid
        public function FilterDatagrid()
            super();
            headerClass = DataGridFilterHeader;
            addEventListener("filterEvent",onFilterChange);
        override public function set dataProvider(value:Object):void
            if(dataProvider)
                resetFiltres();
            super.dataProvider = value;
            resetFiltres(filterFunction);
        private function  onFilterChange(event:Event):void
            if(dataProvider)
                (dataProvider as ICollectionView).refresh();
            selectedIndex = 0;
        private function resetFiltres(inFilterFunction:Function = null):void
            if(dataProvider)
                (dataProvider as ICollectionView).filterFunction = inFilterFunction;
                (dataProvider as ICollectionView).refresh();
            if(inFilterFunction == null)
                var iLen:int= columnCount;
                for(var i:int=0;i<iLen;i++)
                    var dgc:DataGridColumn = columns[i] as DataGridColumn;
                    if(dgc is DataGridFilterColumn)
                        DataGridFilterColumn(dgc).filterText = "";
            selectedIndex = 0;
        private function filterFunction(inObject:Object):Boolean
            var iLen:int= columnCount;
            for(var i:int=0;i<iLen;i++)
                var dgc:DataGridColumn = columns[i] as DataGridColumn;
                var dField:String = dgc.dataField;
                if(dgc is DataGridFilterColumn == false)
                    continue;
                var srchStr:String =  DataGridFilterColumn(dgc).filterText;
                if(srchStr == "")
                    continue;
                var dataStr:String = dgc.itemToLabel(inObject);
                var regex:RegExp = new RegExp("^"+srchStr, "i");
                // if search string exists and
                // does not match the data in the row
                if(regex.exec(dataStr)==null)
                    return false;
            return true;
If all this wrapper class stuff "Extends" the DataGrid, why wouldnt "headerHeight" be available as an attribute in my MXML/grid? When I try to set it explicitly in my dataGrid MXML, the compiler says "Cannot resolve attribute 'headerHeight'". I guess this doesnt really "extend" it? Im confused.