The following example shows how you can set the header height on a Flex DataGrid control by setting the headerHeight property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/16/setting-the-header-height-on-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function init():void {
slider.value = dataGrid.headerHeight;
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="headerHeight:">
<mx:HSlider id="slider"
minimum="0"
maximum="40"
snapInterval="1"
liveDragging="true" />
</mx:FormItem>
<mx:FormItem label="showHeaders:">
<mx:CheckBox id="checkBox"
selected="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
dataProvider="{arr}"
headerHeight="{slider.value}"
showHeaders="{checkBox.selected}"
initialize="init();">
<mx:columns>
<mx:DataGridColumn dataField="col1" />
<mx:DataGridColumn dataField="col2" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
You can also set the headerHeight property using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/16/setting-the-header-height-on-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function init():void {
slider.value = dataGrid.headerHeight;
}
private function slider_change(evt:SliderEvent):void {
dataGrid.headerHeight = evt.value;
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
<mx:Object col1="1.One" col2="1.Two" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="headerHeight:">
<mx:HSlider id="slider"
minimum="0"
maximum="40"
snapInterval="1"
liveDragging="true"
change="slider_change(event);" />
</mx:FormItem>
<mx:FormItem label="showHeaders:">
<mx:CheckBox id="checkBox"
selected="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
dataProvider="{arr}"
showHeaders="{checkBox.selected}"
initialize="init();">
<mx:columns>
<mx:DataGridColumn dataField="col1" />
<mx:DataGridColumn dataField="col2" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
For another example of toggling the header altogether using the showHeaders property, see “Toggling a Flex DataGrid control’s header row”.
{ 9 comments… read them below or add one }
Thanks for this website .. very useful !!
Hey Peter
Do you know of a good tutorial or example of returning information to flex from a database (images and prices) using php? I’m trying to return these and display them in a tilelist but can’t seem to accomplish it and don’t know if it’s on the php end or the flex end that is not working. ANY advice or direction to go would be highly appreciated!
Thanks
Nick
Nick,
Try the Flex 3 Getting Started guide, http://learn.adobe.com/wiki/display/Flex/Getting+Started
It has several examples using PHP, ColdFusion, Java, and ASP.
Apart from that, try the Adobe Flex Developer Center (http://www.adobe.com/devnet/flex/) or asking on the FlexCoders list.
Peter
Thank you for your tutorials.
It’s possible to set a handCursor to a DataGrid Control?
I mean not only the Headers but the list too, preserving the list properties like the roll over and the selected Item color while using the hand cursor on the rows.
I try this example but it’s seems that not work properly.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Array id="arr"> <mx:Object col1="1.One" col2="1.Two" /> <mx:Object col1="1.One" col2="1.Two" /> <mx:Object col1="1.One" col2="1.Two" /> <mx:Object col1="1.One" col2="1.Two" /> <mx:Object col1="1.One" col2="1.Two" /> </mx:Array> <mx:DataGrid useHandCursor="true" buttonMode="true" dataProvider="{arr}"> <mx:columns> <mx:DataGridColumn dataField="col1" /> <mx:DataGridColumn dataField="col2" /> </mx:columns> </mx:DataGrid> </mx:Application>Thank you for your time.
Jose Luis Garcia,
I’ve never tried this, so I don’t know how well these suggestions will work (if at all). You may want to ask on the FlexCoders mailing list.
Idea #1: Use a custom item renderer (Label or something) which sets the
useHandCursorandbuttonModeproperties:<mx:DataGrid dataProvider="{arr}"> <mx:columns> <mx:DataGridColumn dataField="col1" /> <mx:DataGridColumn dataField="col2" /> </mx:columns> <mx:itemRenderer> <mx:Component> <mx:Label useHandCursor="true" buttonMode="true" mouseChildren="false" /> </mx:Component> </mx:itemRenderer> </mx:DataGrid>Idea #2: Extend the DataGrid control and override the protected
drawRowBackground()method and set theuseHandCursorandbuttonModeproperties on thelistContentproperty.package comps { import flash.display.Sprite; import mx.controls.DataGrid; public class MyDataGrid extends DataGrid { public function MyDataGrid() { super(); } override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void { super.drawRowBackground(s, rowIndex, y, height, color, dataIndex); listContent.buttonMode = true; listContent.useHandCursor = true; listContent.mouseChildren = false; } } }Again, I’ve never tried this before and I expect there is a much better approach out there.
Peter
Thank you very much peter
I really appreciate the time you expend in the solutions you propose.
I will keep your advise and try this out on FlexCoders mailing list.
Again thank you very much.
Hey Peter,
I read your articles on adobe about customizing data grids in flash. At the end of
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3/
you show how to add a custom UILoader to the data grid and hint at the idea of being able to do the same with checkboxes, buttons, movieclips etc.
The only examples I have been able to find so far for these are AS2 versions that extend UIObject, not implement ICellRenderer.
Could you help me out in any way?
Hi Peter,
Since we can set the height of a header in a datagrid is it also possible to have more than one line of text in the header display? This would be to help shorten column width when you have long header names.
BTW.. I love this site!!
hello frnds,
could we set corner radious to datagrid?
thx u in advanced,
abhishekchess1@gmail.com
:)