two event are triggred when row is selected (selectionType=checkbox): Select Event & Activate Event

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

When a row is selected with checkbox mode, two events are triggered :Select Event & Activate Event

Expected behavior

When a row’s checkbox is selected, only the Select Event should be triggred. When a row is clicked outside the checkbox only the Activate Event should be triggred.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.7.x

5.0.0

• Angular version: 2.0.x

angular-cli: 1.0.0-beta.25.5 node: 6.9.2 os: darwin x64 @angular/common: 2.4.4 @angular/compiler: 2.4.4 @angular/core: 2.4.4 @angular/forms: 2.4.4 @angular/http: 2.4.4 @angular/material: 2.0.0-beta.1 @angular/platform-browser: 2.4.4 @angular/platform-browser-dynamic: 2.4.4 @angular/platform-server: 2.4.4 @angular/router: 3.2.0 @angular/compiler-cli: 2.4.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome 53.0.2785.101 (64-bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript 2.0.3

[matthew-valenti]

This approach worked for me (checkbox in first cell i.e. cellIndex = 0):

onActivate(event) {
    if (event.type == 'click' && event.cellIndex != 0) {
        //Do something when you click on row cell other than checkbox.
    }
}

[khylias]

@richardrooks I’ve got the same issue, I’ll separate checkbox event and click event. I found a workaround in waiting of update.

In case, you’ve got the datatable :

<ngx-datatable       
     (select)="onSelect($event)"
     (activate)="onActivate($event, modal)"
>

As the click event is running twice and the first is the checkbox event, I stop the propagation as below :

onSelect(e) {
    //Do somethings...
}

onActivate(event, modal) {
    const me = this;
    if(event.type == 'checkbox'){
     //Stop event propagation and let onSelect() work
      event.event.stopPropagation();
    }else{
      //Do somethings when you click on rows
    }
}

I guess that isn’t a very good option but it make the job for now.