DoubleClick the column seprator in AdvancedDataGrid and resize columns like Excel

Resizing not exactly like Excel, but double clickable and some intelligent resizing. Check the Flex 4 demo.

Click here for a demo
View source: Right click demo, or download from here

Note:The last 3 columns have the preferredWidth set to 40. The first 3 columns are dynamic.

Explanation:
We extend the AdvancedDataGridColumn and added a new property called preferredWidth. We do this so that some columns which show boolean values or simple icons do not get more width than they need. This also doesn't deprive other columns of the much needed width to display correctly.

You will need to set the AdvancedDataGrid's doubleClickEnabled=true. The AdvancedDataGrid class and the super class listen to the double click event and the method name is "mouseDoubleClickHandler". So override the method "mouseDoubleClickHandler" and after calling super.mouseDoubleClickHandler(), plugin the autoResize code.

How to know that the separator was clicked?

   if (event.target && event.target is UIComponent) {
    var uiComp:UIComponent = event.target as UIComponent;
    if (uiComp.parent && uiComp.parent.name == "header") {
     autoResizeColumns();
    }
   }

All separators are children of a UIComponent and the name given to this UIComponent is "header" (by the AdvancedDataGrid). How do I know this ... there is a wealth of information if you enjoy looking at the Flex SDK source code. You learn a lot too and that is how I have learnt my component development and a lot of other tricks. "There are 2 types of Flex developers, one who don't enjoy reading other peoples code and one who enjoy reading other peoples code. It is better to quickly switch to the latter side." Sorry for that funny line, it is a dialogue from a Bollywood movie which goes like ... THERE ARE 2 TYPES OF PEOPLE IN THIS WORLD, ONE WHO blah blah and OTHER WHO blah blah. THE SOONER YOU GET TO THE OTHER SIDE, THE BETTER IT IS FOR YOU. Start reading/understanding the SDK source code, you will learn a lot of nice tricks and will also help you extend the base controls.

In the above code we check if the double click happened on a component whose parent's name was "header", if yes, the separator was clicked hence call the autoResizeColumns() method. There is not much in this method except that it takes into account the preferredWidth and decides what the AdvancedDataGridColumn width should be. Notice the use of the "displayableColumns" variable. This is something I found when exploring the AdvancedDataGrid. It contains the list of visible AdvancedDataGridColumns.

autoResizeColumns(): The logic and algorithm for width calculation really depends on your needs. It could be equal divide or as per the itemRenderer's measuredWidth or whatever your project needs are.

I tried implementing the resizing based on the measuredWidth logic. Unfortunately, some components do not report the measuredWidth correctly and the experiment failed. If you do want to play with it than here is an important information you will want to know. The itemRenderer instances are all available in the listItems collection. The listItems collection contains array objects. One array for each row. Each row array contains instances of the itemRenderer for all the visible columns. Is this all documented? Maybe! I found it during one of the deep dive session.

Play with it, implement it in your projects and wow your managers and project managers.