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.

View MXML

<?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:

View MXML

<?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”.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

0 Responses to Setting the header height on a DataGrid control in Flex

  1. Raoul says:

    Thanks for this website .. very useful !!

  2. Nick says:

    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

  3. peterd says:

    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

  4. Jose Luis Garcia says:

    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.

  5. peterd says:

    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 useHandCursor and buttonMode properties:

    <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 the useHandCursor and buttonMode properties on the listContent property.

    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

  6. Jose Luis Garcia says:

    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.

  7. dub says:

    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?

  8. David says:

    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!!

  9. abhishek says:

    hello frnds,
    could we set corner radious to datagrid?
    thx u in advanced,
    abhishekchess1@gmail.com
    :)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree