Toggling a Flex DataGrid control’s header row

4 Responses to Toggling a Flex DataGrid control’s header row

1. Claudiu says:

   January 23, 2009 at 6:56 am

   can the columns be re-sized by the user if the headers are missing? how?

   Reply
2. Peter deHaan says:

   January 23, 2009 at 8:00 am

   Claudiu,

   Excellent question. I don’t think users can resize columns if there isn’t a visible header.
   One workaround is to enable the headers when the user rolls over the DataGrid control, as seen in the following example:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   
       <mx:Array id="arrDP">
           <mx:Object c="1" c1="One" c2="Two" c3="Three" />
           <mx:Object c="2" c1="One" c2="Two" c3="Three" />
           <mx:Object c="3" c1="One" c2="Two" c3="Three" />
           <mx:Object c="4" c1="One" c2="Two" c3="Three" />
           <mx:Object c="5" c1="One" c2="Two" c3="Three" />
           <mx:Object c="6" c1="One" c2="Two" c3="Three" />
           <mx:Object c="7" c1="One" c2="Two" c3="Three" />
           <mx:Object c="8" c1="One" c2="Two" c3="Three" />
           <mx:Object c="9" c1="One" c2="Two" c3="Three" />
           <mx:Object c="10" c1="One" c2="Two" c3="Three" />
           <mx:Object c="11" c1="One" c2="Two" c3="Three" />
       </mx:Array>
   
       <mx:DataGrid id="dataGrid"
               dataProvider="{arrDP}"
               showHeaders="false"
               rollOver="dataGrid.showHeaders = true;"
               rollOut="dataGrid.showHeaders = false;" />
   
   </mx:Application>
   

   The other workaround would be to always show the data grid headers, but set the headerHeight property to a small value (such as 2-4). This would still allow users to resize columns, but it wouldn’t display column labels. The only catch is that the sort arrow would still appear, so you would either need to set the sortableColumns property to false, or create a transparent icon for the sort arrow (setting the sortArrowSkin style to null was problematic).

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   
       <mx:Array id="arrDP">
           <mx:Object c="1" c1="One" c2="Two" c3="Three" />
           <mx:Object c="2" c1="One" c2="Two" c3="Three" />
           <mx:Object c="3" c1="One" c2="Two" c3="Three" />
           <mx:Object c="4" c1="One" c2="Two" c3="Three" />
           <mx:Object c="5" c1="One" c2="Two" c3="Three" />
           <mx:Object c="6" c1="One" c2="Two" c3="Three" />
           <mx:Object c="7" c1="One" c2="Two" c3="Three" />
           <mx:Object c="8" c1="One" c2="Two" c3="Three" />
           <mx:Object c="9" c1="One" c2="Two" c3="Three" />
           <mx:Object c="10" c1="One" c2="Two" c3="Three" />
           <mx:Object c="11" c1="One" c2="Two" c3="Three" />
       </mx:Array>
   
       <mx:DataGrid id="dataGrid"
               dataProvider="{arrDP}"
               headerHeight="4"
               sortableColumns="false" />
   
   </mx:Application>
   

   Hope that helps,

   Peter

   Reply
3. Claudiu says:

   January 27, 2009 at 3:52 pm

   Yes, I was thinking the same way I have implemented the second solution and integrate the headerHeight=”10″ and colors into the design. For the first version they will accept the solution, but in the end I might need to putt together a few lists inside some HDividers and synchronize the data binding and the events or if i will have the time to write some controller from scratch.

   Thank you for your time, the blog is fantastic – full of useful hints and inspiration.

   Regards.

   Reply
4. pszemo says:

   November 20, 2009 at 10:22 am

   Hi,
   is possible to change bottom border at header row?
   regards,
   pszemo

   Reply