Selecting a column in a flex datagrid

Question

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?

Answer 1

Hi Phil,

I have a wee demo (with source) on how to do this on my website Here. Basically, you check to see if the DataGrid sort is the same as the column name in the Item renderer, and if it is, you draw a colored background.

Hope this helps.

Caspar

Answer 2

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>