Displaying tool tips in a Flex DataGrid control’s header

The following example shows you how you can truncate a DataGrid column’s text and display a tool tip by setting a custom header renderer.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="xmlDP">
        <nodes>
            <node col1="One.1" col2="One.2" />
            <node col1="Two.1" col2="Two.2" />
            <node col1="Three.1" col2="Three.2" />
            <node col1="Four.1" col2="Four.2" />
            <node col1="Five.1" col2="Five.2" />
            <node col1="Six.1" col2="Six.2" />
            <node col1="Seven.1" col2="Seven.2" />
            <node col1="Eight.1" col2="Eight.2" />
            <node col1="Nine.1" col2="Nine.2" />
        </nodes>
    </mx:XML>

    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlDP.node}"
            width="300"
            height="200">
        <mx:columns>
            <mx:DataGridColumn dataField="@col1"
                    headerText="The quick brown fox jumped over the lazy dog"
                    headerRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="@col2"
                    headerText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
                    headerRenderer="mx.controls.Label" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.DataGrid;
            import mx.controls.Label;

            private var xmlDP:XML = <nodes>
                        <node col1="One.1" col2="One.2" />
                        <node col1="Two.1" col2="Two.2" />
                        <node col1="Three.1" col2="Three.2" />
                        <node col1="Four.1" col2="Four.2" />
                        <node col1="Five.1" col2="Five.2" />
                        <node col1="Six.1" col2="Six.2" />
                        <node col1="Seven.1" col2="Seven.2" />
                        <node col1="Eight.1" col2="Eight.2" />
                        <node col1="Nine.1" col2="Nine.2" />
                    </nodes>;

            private var dataGrid:DataGrid;
            private var dataGridCol1:DataGridColumn;
            private var dataGridCol2:DataGridColumn;

            private function init():void {
                dataGridCol1 = new DataGridColumn();
                dataGridCol1.dataField = "@col1";
                dataGridCol1.headerText = "The quick brown fox jumped over the lazy dog";
                dataGridCol1.headerRenderer = new ClassFactory(Label);

                dataGridCol2 = new DataGridColumn();
                dataGridCol2.dataField = "@col2";
                dataGridCol2.headerText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit";
                dataGridCol2.headerRenderer = new ClassFactory(Label);

                dataGrid = new DataGrid();
                dataGrid.dataProvider = xmlDP.node;
                dataGrid.columns = [dataGridCol1, dataGridCol2];
                dataGrid.width = 300;
                dataGrid.height = 200;
                addChild(dataGrid);
            }
        ]]>
    </mx:Script>

</mx:Application>

Tagged as: headerRenderer