Datagrid - Stop event HEADER_RELEASE when push headerRenderer checkbox

I have this code in flex:

<mx:Application ... >
....
<mx:DataGrid id="filtros" styleName="grid" rowCount="10" dataProvid开发者_Go百科er="{_larcFiltros}" allowMultipleSelection="true" >
            <mx:columns>
            <mx:DataGridColumn dataField="titulo" textAlign="left">
              <mx:headerRenderer>
                <mx:Component>              
                  <mx:HBox width="100%" horizontalAlign="left" >                       
                    <mx:CheckBox click="outerDocument._mCheckAll(0)" />
                    <mx:Label text="Título" />
                  </mx:HBox>              
                </mx:Component> 
              </mx:headerRenderer>          
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Descripción" dataField="resumen"/>
...
</mx:Application>

When I click in the checkbox I don't want the column to sort, but when I click outside of checkbox, in the header I want to sort. How do I find out if I've clicked in the checkbox or outside of the checkbox when clicking the header?

Any ideas?

Thanks a lot!

I encountered a similar issue when putting buttons inside the headerrender of a DataGridColumn. If the button was clicked, I wanted to prevent the column from sorting, otherwise if anywhere else inside the header was clicked, I wanted the column to sort normally.

My solution was accomplished by adding a public property to the headerrenderer which indicated whether the mouse was down over the button or the rest of the header:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
mouseDown="{handleMouseClick(event);}"
width="100%" height="100%">
<mx:Script>
    <![CDATA[
        import mx.controls.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        [Embed(source="assets/images/search-icon-small.png")]
        [Bindable] private var searchIcon:Class;

        [Bindable] private var _headerText:String;
        [Bindable] public var searchClicked:Boolean = false;

        override public function set data(value:Object):void {
            if (value)
                this._headerText = (value as DataGridColumn).headerText;    
        }   

        private function handleMouseClick(e:MouseEvent):void {
            searchClicked = e.target is Button;
        }           
    ]]>
</mx:Script>
<mx:Label id="lbl_header" text="{_headerText}"/>
<mx:Button icon="{searchIcon}" height="20" width="20" right="20" mouseDownOutside="{searchClicked = false}" mouseDown="{searchClicked = true}"/>

On the parent application, listen for the headerRelease event of the datagrid (code abbreviated):

    <mx:DataGrid id="dg_members" headerRelease="{handleSort(event);}"/>

    private function handleSort(e:DataGridEvent):void {
     if ((e.itemRenderer as SearchHeader).searchClicked)
         e.preventDefault();
 }

There are probably more elegant solutions out there, but this is quick and dirty.

Improvement to the earlier answer

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mouseDown="{handleClick(event)}">
    <mx:Script>
       <![CDATA[
        import mx.core.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        private var column : DataGridColumn;

        private function handleClick(e:MouseEvent) : void {

            if(e.target is Button){
                e.stopPropagation();
            }            
        }


        override public function set data(value:Object):void {
            column = value as DataGridColumn
            headerBtn.label = (value as DataGridColumn).headerText;
        }

        private function btnClick(event:MouseEvent):void{
                //do something
        }

    ]]>
   </mx:Script>
   <mx:Button id="headerBtn" click="{btnClick(event)}" />
</mx:Canvas>

Add event listener for click and check if event.target type is CheckBox:

Replace this:

<mx:CheckBox click="outerDocument._mCheckAll(0)" />

with

<mx:CheckBox click="onHeaderClick(event)" />

and implement onHeaderClick method

private function onHeaderClick(event:MouseEvent):void
{
    if(event.target is CheckBox) {
        trace("Checkbox was clicked");
    } else {
        trace("Column was clicked");
    }
}

This is a much cleaner version of zhaupin's solution, that doesn't require any modification outside of the headerRender. When the data is set in the renderer, store the column that this renderer is being used for then toggle the sortability of the column based on the target of the click.

in the header renderer:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mouseDown="{handleClick(event)}">
    <mx:Script>
       <![CDATA[
        import mx.core.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        private var column : DataGridColumn;

        private function handleClick(e:MouseEvent) : void {

            if(e.target is Button){
                column.sortable = false;
            }
            else{
                column.sortable = true;
            }
        }


        override public function set data(value:Object):void {
            column = value as DataGridColumn
            headerBtn.label = (value as DataGridColumn).headerText;
        }

        private function btnClick(event:MouseEvent):void{
                //do something
        }

    ]]>
   </mx:Script>
   <mx:Button id="headerBtn" click="{btnClick(event)}" />
</mx:Canvas>

If you are using this for any other component besides a button, just replace button with the component you are using.

Any click listeners on other objects in the header will still fire (such as btnClick here) as well as this handleClick function, so those functions will still behave normally.