Selecting a column in a flex datagrid

apache-flexdatagrid

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


<mx:Script>
    <![CDATA[

        import mx.collections.ArrayCollection;
        import mx.events.DataGridEvent;


        [Bindable]
        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");
            event.stopImmediatePropagation();                           
        }
    ]]>

</mx:Script>

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

Related Question