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

[Dabada]

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

[khylias]

Hi,
I've got the same issue and I search about a solution.
Any workaround or tricks ?

[richardrooks]

What concerns me is that when clicking a checkbox you get both a checkbox and click event. should only be checkbox. As far as selected that should occur when selecting outside the checkbox because you get the checkbox event with onActivated.

[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.

[richardrooks]

@khylias will give it a try now. thanks much.

[mvhecke]

When the SelectionType is checkbox the event could be stopped to prevent activate from firing? https://github.com/swimlane/ngx-datatable/blob/89dbad5dc958b578d70d7f54d2d1320bf576c799/src/components/body/selection.component.ts#L37

[gpickney]

Posting to see if this issue has been looked into more. On version 9.3.1 and the issue is still not fixed.

When selection is checkbox, single row click triggers activate event, and checkbox selection triggers both select and activate events. I can therefore not use checkbox to track objects while also using row selection to trigger some detail views.

Any thoughts?

[ccarns]

@gpickney Modifying the code above from @richardrooks you can pull that off like this:

onActivate(event) {
    const checkboxCellIndex = 1;
    if (event.type === 'checkbox') {
      //Stop event propagation and let onSelect() work
      console.log('Checkbox Selected', event);
      event.event.stopPropagation();
    } else if (event.type === 'click' && event.cellIndex !== checkboxCellIndex) {
      //Do somethings when you click on row cell other than checkbox
      console.log('Row Clicked', event.row); /// <--- object is in the event row variable
    }
}

[richardrooks]

No I didn't. Went a completely different route.

Richard

On Sep 29, 2017, at 11:30 AM, ccarns [e-mail] wrote:

@gpickney Did you work out a solution for your requirement above of checkbox and row selection? That is exactly the functionality I was just googling for? Thanks for any response!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[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.
    }
}