Ngx-datatable: Prevent selection of the row when any button click in a row

[touqeershafi]

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 any button clicked in any cell it also selects the row.
Eg: Image

Expected behavior
There should be a callback where we can determine that a particular button is clicked on that basis we can prevent the row selection. currently there is a property [selectCheck] which takes a function with argument of the row checkSelectable(event) it should have the actual event as well like: checkSelectable($event, row) from the event we can detect which dom is clicked ?

Reproduction of the problem
Add a custom column name it action in that column add <button> now if you click that button it will select that row.

Please tell us about your environment:
Ubuntu, WebStorm

• Table version: ^7.1.1

• Angular version: 4x

[touqeershafi]

I've make it to work but i think it's not the best way ?

onActivate($event) {
    if($event.event.srcElement.nodeName.toLowerCase() == 'button') {
      $event.event.preventDefault();
      this.selected = []; // Resetting the selected array might not be the good use ?
    }
  }

[amcdnl]

Ya, this is really the best way ATM. I'm not sure what the best way to implement this would be, perhaps only selecting when a row or its child elements was clicked?

[touqeershafi]

I think [selectCheck] property should become function which will return Boolean and should have 2 method signatures eg: (selectCheck)="selectCheck($event, $row)" it will be a good solution to this because we actually don't need to reset this.selected collection to empty [] which will eventually maintain the previous selected rows.

[Krtic]

use event.stopPropagation(); within your click method

[artipixel]

I've tried to figure out a solution for myself, here is what I did:

In component.ts

  clickStopper(event) {
      event.stopPropagation();
      return;
  }

In component.html

<button class="inline_action" (click)="clickStopper($event)">DO THE STUFF</button>

[bvdwalt]

Thanks for the hint guys, worked like a charm.

event.stopPropagation();

[godhar]

But if you are actually dealing with typescript objects you can not retain any object properties, only what is displayed on the table, if you are using angular material data table that is. No solution found thus far!

[Antilamer1709]

use event.stopPropagation(); within your click method

here is an example for people new to angular:

in html add (click)="stopPropagation($event)" to your element and use event.stopPropagation() in .ts file.