Datagrid - Stop event HEADER_RELEASE when push headerRenderer checkbox

Question

Hi, i have this code in flex:

<mx:Application ... >
....
<mx:DataGrid id="filtros" styleName="grid" rowCount="10" dataProvider="{_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 want the column to sort, but when i click out of checkbox, in the column i wan to sort. How to know when i click in the checkbox or the column?

Any idea?

thanks a lot!

Answer 1

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");
    }
}

Answer 2

Tanks for your answer, but not working in my code. The problem is that when i click on column of my DataGrid the application fires two events, DatagridEvent.HEADER_RELEASE and MouseEvent.Click, but I need to know if I clicked on the checkbox or the column for sorting.

If click on Checkbox = DatagridEvent.preventDefault(); for stop the sorting else execute sorting.

Any idea??

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
public function _mInit():void{
    // Creación de columnas.
    if (_parrColumnas.length == 0){
      _mGetError("Necesita introducir la lista de columnas que componen el DataGrid.");
      return; 
    }
    mGrid.addEventListener(DataGridEvent.HEADER_RELEASE,onHeaderClick);
    //mGrid.addEventListener(MouseEvent.CLICK,onHeaderClick);

    var intInit:int = 0;
    var objColumn:DataGridColumn;
    var arrColumns:Array = mGrid.columns;

    // En la primera columna se crea el check para seleccionar todos.
    if (_pbooMultipleSelect){
      objColumn = new DataGridColumn();
      objColumn.dataField  = _parrColumnas[0].data;
      _lstrLabelColumn     = _parrColumnas[0].label;
      objColumn.headerRenderer = checkRows;
      arrColumns.push(objColumn);  
      intInit = 1; 
    }

    for (var i:int=intInit;i<_parrColumnas.length;i++){
      objColumn = new DataGridColumn();
      objColumn.dataField  = _parrColumnas[i].data;
      objColumn.headerText = _parrColumnas[i].label;        
      arrColumns.push(objColumn);                      
    }
    mGrid.columns = arrColumns;

  }

public function onHeaderClick(event:DataGridEvent):void{

    /** ??????? my Question ????? */

         /*if(event.target is CheckBox) {
           Alert.show("ok");
           event.preventDefault();                
         }else{
           Alert.show("ko");                
         } */            
  }



<mx:Component id="checkRows">  
<mx:HBox width="100%" horizontalAlign="left" >                        
  <mx:CheckBox selected="{outerDocument._lCheckAllDet}" toolTip="Seleccionar Todos."  />      
  <mx:Label text="{outerDocument._lstrLabelColumn}" />
</mx:HBox>

<mx:DataGrid id="mGrid" itemClick="_mItemClick(event)" styleName="grid" rowCount="{_pintNumFilas}" dataProvider="{_parcDataProvider}" allowMultipleSelection="{_pbooMultipleSelect}" width="100%" >

Answer 3

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.