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

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.

[GoogleAdsWide]

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.

One thought on “Removing the header indicator and selection indicator from the MX DataGrid control header in Flex 3

Comments are closed.