Question

I am having serious problems trying to resize columns in a DataGrid. I’ve been at it for over a day now and am at my wit’s end with a headache to boot.

Essentially, I have a TabNavigator component with NavigatorContent children inside. In each one of the NavigatorContent children, I have a DataGrid to which I’m setting the width to 100% (this is needed to be able to handle resizing of the browser window). I am using the excellent filterable DataGrid from Iwo Banas as the DataGrid in each tab.

Now, I am making visible/invisible some columns in each of the DataGrids and this is working fine. However, I find that the column widths are not being set correctly. Whenever I set the column widths (using this code), all of the columns seem to be set to the correct width except for the ones that I have recently made visible and the column immediately to the left of these. The ones recently made visible are very small (though I set their width to 30) and the one to the left of these columns is very large (though I’ve also set its width to 30).

I think it’s something to do with the life cycle of the DataGrids because the first DataGrid behaves fine. It’s when I click on the other tabs that I find that the widths of the other DataGrids have not been set correctly.

However, if I “see” one of those problem DataGrids (i.e. it appears on the screen) and the code which resizes the columns runs again, the columns are correctly sized.

I have tried a number of things recommended all over the internet including the questions listed below but to no avail.

This is the code I’m using to resize the columns (taken from this answer)

public static function resizeColumn(col:DataGridColumn, size:int):void
        {
                var owner:* = col.mx_internal::owner
                col.mx_internal::owner = null;

                col.width = size;

                col.mx_internal::owner = owner;
        }

Any and all help would be greatly appreciated.

I have already looked at the following answers.
Flex DataGrid column width: one column to rule them all?
Flex 3 DataGrid Column Width Problem
Flex DataGrid Column Width (<– this answer got me closest)
Unable to change the column width dynamically in flex datagrid

Answer 1

So, after a huge amount of head wrecking, I finally found a solution (at least to my problem, not sure if it would help anyone else but thought I’d post it here anyway as you never know what could help someone else).

I decided that since calling the resize code when the DataGrid is on screen works then I needed to just do that. So I thought of putting the resize code for the relevant DataGrid depending on the tab clicked. Not that straightforward as there didn’t seem to be a straightforward way to implement a click handler for the tabs. I did a quick Google and found this solution.

Essentially, you add a click handler for each tab button by cycling through the children of the tab navigator, getting the button and adding an event listener.

Then, you do what you need to do in the handler.

Code example (slightly different to one from website):

        protected function tbGridArea_creationCompleteHandler(event:FlexEvent):void
        {
            for ( var i:int=0; i < tbGridArea.getChildren().length; i++ )
            {
                var tab:Object = tbGridArea.getTabAt(i);
                tab.addEventListener( FlexEvent.BUTTON_DOWN,myTabClickHandler );
            }
        }

        private function myTabClickHandler(event:Event):void {
            switch(event.currentTarget.label) {
            // do whatever you need to do here
            }
        }