Removing the header indicator and selection indicator from the MX DataGrid control header in Flex 3

By Peter deHaan On June 19, 2010 · 1 Comment

In a previous example, “Disabling item highlight indicator in the MX List control in Flex 3″, we saw how you could disable the highlight indicator in the MX List control in Flex 3 by subclassing the List control and overriding the protected drawHighlightIndicator() method.

The following example shows how you can remove the header indicator and selection indicator from the MX DataGrid control in Flex 3 by extending the DataGridHeader class, overriding the protected drawHeaderIndicator() and drawSelectionIndicator() methods and setting the headerClass property in the mx_internal namespace.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ -->
<mx:Application name="MX_DataGrid_headerClass_drawHeaderIndicator_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <comps:CustomDataGrid id="dGrid"
            draggableColumns="false"
            verticalScrollPolicy="on"
            width="360">
        <comps:columns>
            <mx:DataGridColumn dataField="c1" headerText="Column 1" />
            <mx:DataGridColumn dataField="c2" headerText="Column 2" />
            <mx:DataGridColumn dataField="c3" headerText="Column 3" />
        </comps:columns>
        <comps:dataProvider>
            <mx:ArrayCollection>
                <mx:Object c1="Row 1, Column 1" c2="Row 1, Column 2" c3="Row 1, Column 3" />
                <mx:Object c1="Row 2, Column 1" c2="Row 2, Column 2" c3="Row 2, Column 3" />
                <mx:Object c1="Row 3, Column 1" c2="Row 3, Column 2" c3="Row 3, Column 3" />
                <mx:Object c1="Row 4, Column 1" c2="Row 4, Column 2" c3="Row 4, Column 3" />
                <mx:Object c1="Row 5, Column 1" c2="Row 5, Column 2" c3="Row 5, Column 3" />
                <mx:Object c1="Row 6, Column 1" c2="Row 6, Column 2" c3="Row 6, Column 3" />
                <mx:Object c1="Row 7, Column 1" c2="Row 7, Column 2" c3="Row 7, Column 3" />
                <mx:Object c1="Row 8, Column 1" c2="Row 8, Column 2" c3="Row 8, Column 3" />
                <mx:Object c1="Row 9, Column 1" c2="Row 9, Column 2" c3="Row 9, Column 3" />
            </mx:ArrayCollection>
        </comps:dataProvider>
    </comps:CustomDataGrid>
 
</mx:Application>

The custom DataGrid header class, comps/CustomDataGridHeader.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import flash.display.Sprite;
    import mx.controls.dataGridClasses.DataGridHeader;
    import mx.controls.listClasses.IListItemRenderer;
 
    public class CustomDataGridHeader extends DataGridHeader {
        public function CustomDataGridHeader() {
            super();
        }
 
        override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            // ignore
        }
 
        override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            // ignore
        }
    }
}

And the custom DataGrid control, comps/CustomDataGrid.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import mx.controls.DataGrid;
    import mx.core.mx_internal;
 
    public class CustomDataGrid extends DataGrid {
        public function CustomDataGrid() {
            super();
            mx_internal::headerClass = CustomDataGridHeader;
        }
    }
}

View source is enabled in the following example.

If you wanted to toggle the header indicator or selection indicator instead of disabling them completely, you could add two new variables to your CustomDataGrid class and add some additional logic to your custom DataGrid header class, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ -->
<mx:Application name="MX_DataGrid_headerClass_drawHeaderIndicator_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="showHeaderIndicator:">
                <mx:CheckBox id="ch1" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="showSelectionIndicator:">
                <mx:CheckBox id="ch2" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <comps:CustomDataGrid id="dGrid"
            draggableColumns="false"
            verticalScrollPolicy="on"
            showHeaderIndicator="{ch1.selected}"
            showSelectionIndicator="{ch2.selected}"
            width="360">
        <comps:columns>
            <mx:DataGridColumn dataField="c1" headerText="Column 1" />
            <mx:DataGridColumn dataField="c2" headerText="Column 2" />
            <mx:DataGridColumn dataField="c3" headerText="Column 3" />
        </comps:columns>
        <comps:dataProvider>
            <mx:ArrayCollection>
                <mx:Object c1="Row 1, Column 1" c2="Row 1, Column 2" c3="Row 1, Column 3" />
                <mx:Object c1="Row 2, Column 1" c2="Row 2, Column 2" c3="Row 2, Column 3" />
                <mx:Object c1="Row 3, Column 1" c2="Row 3, Column 2" c3="Row 3, Column 3" />
                <mx:Object c1="Row 4, Column 1" c2="Row 4, Column 2" c3="Row 4, Column 3" />
                <mx:Object c1="Row 5, Column 1" c2="Row 5, Column 2" c3="Row 5, Column 3" />
                <mx:Object c1="Row 6, Column 1" c2="Row 6, Column 2" c3="Row 6, Column 3" />
                <mx:Object c1="Row 7, Column 1" c2="Row 7, Column 2" c3="Row 7, Column 3" />
                <mx:Object c1="Row 8, Column 1" c2="Row 8, Column 2" c3="Row 8, Column 3" />
                <mx:Object c1="Row 9, Column 1" c2="Row 9, Column 2" c3="Row 9, Column 3" />
            </mx:ArrayCollection>
        </comps:dataProvider>
    </comps:CustomDataGrid>
 
</mx:Application>

The custom DataGrid header class, comps/CustomDataGridHeader.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import flash.display.Sprite;
    import mx.controls.dataGridClasses.DataGridHeader;
    import mx.controls.listClasses.IListItemRenderer;
    import comps.CustomDataGrid;
 
    public class CustomDataGridHeader extends DataGridHeader {
        public function CustomDataGridHeader() {
            super();
        }
        override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            if (CustomDataGrid(dataGrid).showHeaderIndicator) {
                super.drawHeaderIndicator(indicator, x, y, width, height, color, itemRenderer);
            }
        }
 
        override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            if (CustomDataGrid(dataGrid).showSelectionIndicator) {
                super.drawSelectionIndicator(indicator, x, y, width, height, color, itemRenderer);
            }
        }
    }
}

And the custom DataGrid control, comps/CustomDataGrid.as, is as follows:

/** http://blog.flexexamples.com/2010/06/19/removing-the-header-indicator-and-selection-indicator-from-the-mx-datagrid-control-header-in-flex-3/ */
package comps {
    import mx.controls.DataGrid;
    import mx.core.mx_internal;
 
    public class CustomDataGrid extends DataGrid {
 
        public var showHeaderIndicator:Boolean = true;
        public var showSelectionIndicator:Boolean = true;
 
        public function CustomDataGrid() {
            super();
            mx_internal::headerClass = CustomDataGridHeader;
        }
    }
}

View source is enabled in the following example.

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.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.