Selecting a column in a flex datagrid


In a flex datagrid, by default clicking on column headers does sorting. I want it such that if a user clicks a column header the entire column is selected. I have the datagrid listening for the HEADER_RELEASE event so I know when the column header is clicked.

How can I have the column and header appear highlighted similar to how a row is highlighted when selected?

Best Solution

You can do this by setting backgroundColor of the selected column:

<?xml version="1.0" encoding="utf-8"?>


        import mx.collections.ArrayCollection;

        public var mydata:ArrayCollection;

        public function init():void
            mydata = new ArrayCollection();
            mydata.addItem( { a:"John", b:"Smith" } );
            mydata.addItem( { a:"Jane", b:"Doe" } );

            grid1.addEventListener(DataGridEvent.HEADER_RELEASE, selectColumn);

        public function selectColumn(event:DataGridEvent):void
            var selectedColumn:DataGridColumn = grid1.columns[event.columnIndex];
            selectedColumn.setStyle("backgroundColor", "0x7FCEFF");


<mx:DataGrid    id="grid1" editable="true" dataProvider="{mydata}" >
            <mx:DataGridColumn dataField="a"  headerText="A"  />
            <mx:DataGridColumn dataField="b" headerText="B"  />     

Related Question