search

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

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

Open Dabada opened 7 years ago

Dabada commented 7 years ago

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:

khylias commented 7 years ago

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

richardrooks commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

mvhecke commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

Richard

On Sep 29, 2017, at 11:30 AM, ccarns notifications@github.com 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 commented 6 years ago

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