Primeng: TurboTable: When selectionMode=multiple, can't select by checkbox

[lusid]

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Current behavior
When selectionMode="multiple" is set on p-table, you can select a row by clicking the row and you can deselect it by clicking the row or the checkbox, but you can't select the row using the checkbox.

Expected behavior
You should be able to select a row by clicking the checkbox or the entire row.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/gO4f2bLzGLPhg9k0im3s?p=preview

What is the motivation / use case for changing the behavior?
This functionality works in the old p-dataTable component.

[lusid]

As a side note, the sample Plunkr you tell people to use in your issue tracker includes the import of TableModule on line 66 of app.module.ts, but I had to add it to the imports on line 137. Caused me some grief when I went to try to repro it for you.

[mousedown]

I've also seen this https://github.com/primefaces/primeng/issues/5262

I was able to get the selection made by renaming as something else instead of rowData.. however the event is dispatched when the row is selected, as well as the checkbox resulting in the selection array being inflated.

```

      <td>
        <p-tableCheckbox [value]="item"></p-tableCheckbox>
      </td>

      <td *ngFor="let col of cols">
        <div [ngSwitch]="col.ref">

```

[mousedown]

.. so I amended Table.js to have the additional check for checkbo. I don't need the use case of selecting the row by the row. I have teh checkbox for that.

[mousedown]

@cagataycivici This seams related https://github.com/primefaces/primeng/issues/5229 Feature Req. I assumed this was a bug. They seam related - I needed to hack my version to move past. Are you able to advise please?

[cagataycivici]

Will review for 5.2.4.

[yonatanayalon]

A simple CSS solution that worked for me:

in global styles.css:

.ui-table-tbody .ui-chkbox { pointer-events: none; }
http://plnkr.co/edit/ByEdALuiKJgQfiN7hVQy?p=preview

[arjendevries]

Is this issue that you can't actually click on the checkbox, but on the rest of the row? Strangely enough when i removed selectionMode="multiple" it behaved as expected. Then, I could only click on the checkbox to select my row, but not anywhere else, which is what I wanted.

[marslan2037]

i have same issue, i need click working on anywhere on row and checkbox, but its not working

[mousedown]

@arjendevries - Yes, that's the one. I actually wanted multiple tho.

yonatanayalon's fix confirmed. thank you

[cagataycivici]

This is expected behavior because the table in plunkr has row selection and checkbox selection enabled which conflicts, you should not used them both at the same time since they are alternatives.

[marslan2037]

@cagataycivici i need both at the same time :( please see this issue, https://github.com/primefaces/primeng/issues/5373

[yonatanayalon]

You can differentiate and know you clicked a checkbox via the current event information:

onRowSelect(event) {
if (event.originalEvent.target['nodeName'] === "P-TABLECHECKBOX") {
console.log("clicked on a Checkbox")
}
else {
console.log("clicked on a Row")
}
}

[marslan2037]

@yonatanayalon what is nodeName here ?

[yonatanayalon]

@marslan2037 Sorry for that - look at my updated comment

[bkoukoori]

how to make all the checkboxes selected on page load?

[niltonjacintho]

A simple CSS solution that worked for me:

in global styles.css:

.ui-table-tbody .ui-chkbox { pointer-events: none; }
http://plnkr.co/edit/ByEdALuiKJgQfiN7hVQy?p=preview

PERFECT!!