CODEWITHSUNDEEP
apache-flexdatagrid
philcruz
philcruz

Reputation: 8445

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?

Upvotes: 1

Views: 5068

Answers (2)

philcruz
philcruz

Reputation: 8445

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>

Upvotes: 2

Caspar Harmer
Caspar Harmer

Reputation: 8117

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

Upvotes: 0

Related Questions