The following example shows you how to toggle the header row in a Flex DataGrid control using the showHeaders property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/toggling-a-flex-datagrid-controls-header-row/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object country="USA"
gold="35"
silver="39"
bronze="29" />
<mx:Object country="China"
gold="32"
silver="17"
bronze="14" />
<mx:Object country="Russia"
gold="27"
silver="27"
bronze="38" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="showHeaders"
selected="true" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
dataProvider="{arr}"
showHeaders="{checkBox.selected}">
<mx:columns>
<mx:DataGridColumn dataField="country" />
<mx:DataGridColumn dataField="gold" />
<mx:DataGridColumn dataField="silver" />
<mx:DataGridColumn dataField="bronze" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
{ 4 comments… read them below or add one }
can the columns be re-sized by the user if the headers are missing? how?
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
headerHeightproperty 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 thesortableColumnsproperty tofalse, or create a transparent icon for the sort arrow (setting thesortArrowSkinstyle tonullwas 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
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.
Hi,
is possible to change bottom border at header row?
regards,
pszemo