Primeng: Turbo Table : can't select row by clicking checkbox in Multiple selection mode

[AbhijitMuke]

Hi All,

I have once scenario with table. Supposed to have multiple selection mode with Checkbox selection in Table.

Not able to select row by clicking on checkbox which is in first column of Table.

Please find Demo here - Turbo Table : CheckBox + Multiple Selection

[AbhijitMuke]

It's bug in Table. May I have your attention Please ? @cagataycivici

[fabki00]

I have the same problem. Clicking on "select all" checkbox works but clicking on individual checkboxes doesn't.

[fabki00]

@AbhijitMuke check this issue. #5179
There is no bug.
You can't have both selectionMode="multiple" and
[pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex"
They are mutually exclusive.

<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
            <td>
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td> 

[AbhijitMuke]

Added selectionMode="" + checkbox to achieve this. Thanks

Having multiple row selection with checkbox click.

selectionMode="single"
selectionMode="multiple"
selectionMode=""

[srikant]

Thanks AbhijitMuke,

selectionMode=" " or selectionMode="whatever"
assigning empty or any string value to selectionMode, did the trick !!!

[cagataycivici]

It is by design currently, if there is more demand, we'll reconsider adding support. I don't see why not, just need more demand. I'll reopen when necessary.

[raymond-kolorbox]

It can have events for clicking either the checkbox or the whole row.
Add [pSelectableRow]="rowData" in td instead of tr. In p-table onSelectRow function, it can determine the click action is from the checkbox or the td

[dlarr]

Hi,

I had some similare issues.

• I needed to NOT BE ABLE to select rows when I clecked on a row
• I needed to select rows only VIA checkBoxes
• I needed to FORBID some rows selections
• I needed to be able to use SINGLE or MULTIPLE selections
• I need to FORBID all rows selection

In case some one needs similar features :
I adressed that here : https://stackblitz.com/edit/primeng-turbo-table-j758r1

I made a custom SingleSelection behaviours and I didn't use selectionMode

[akshetty9]

I need to make row clicking as single select, but checkbox selection as multi-select in the same tableThe reason is that we want to show details of the row selected for the single row in another div and should be able to select multiple checkboxes and to take action on them together. . Is it possible to achive this?

[pgossmann]

Could you please reopen this issue. It doesn't seem to be solved and the workaround is also not working.

I want to have a multiple select table where I can click on the rows and also show checkboxes on each row and let the user click the checkboxes.

why are those features mutual exclusive?

I need the header-checkbox for a "select all".

[kekoder]

I need to make row clicking as single select, but checkbox selection as multi-select in the same tableThe reason is that we want to show details of the row selected for the single row in another div and should be able to select multiple checkboxes and to take action on them together. . Is it possible to achive this?

i know this was long ago but just want to share you can achieve this by moving your onRowSelect method from p-table to td's (click) excluding the td that has checkbox in it and leaving the selectionMode of p-table default

[hugonoro]

Hi, any updates on this request? This is definitely a common scenario. I'm currently also in need of being able to perform one operation when selecting one single row ( by clicking the row ) and a different set of options when picking a group of rows by selecting them with a checkbox column. It would be really great if we could have the row selection and the checkbox selection work together and allow independent behaviours.

[samheihey]

This request is absolutely common imho

[kmcnamee]

In Primeng 6.x this worked as expected. However when we updated to 7.x we ran into this issue and had to put in place a workaround. Same case we were using selectionMode="multiple" with

<tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex"> <td> <p-tableCheckbox [value]="rowData"></p-tableCheckbox> </td>

Seams like the behavior also changed between releases from what was expected to the checkbox on the row not functioning?

[sehgal-akshay]

I need to make row clicking as single select, but checkbox selection as multi-select in the same tableThe reason is that we want to show details of the row selected for the single row in another div and should be able to select multiple checkboxes and to take action on them together. . Is it possible to achive this?

Did you find solution to this ?

[mistergravy]

Could you please reopen this issue. It doesn't seem to be solved and the workaround is also not working.

I want to have a multiple select table where I can click on the rows and also show checkboxes on each row and let the user click the checkboxes.

why are those features mutual exclusive?

I need the header-checkbox for a "select all".

@pgossmann Were you ever able to find a solution that worked? I'm needing to implement the exact behavior you've described. Unless this has been addressed in v8.x and I've completely missed it in the docs, I'm stuck.

[indrajitbnikam]

Hi guys, I have found the solution,

This is the actual code from their website docs for checkbox-selection for p-table,
If you observe carefully they have not used [pSelectableRow]="rowData" anywhere!!
Just check your code after removing that.

Also a member talked about it in another issue,
check out this link!
https://github.com/primefaces/primeng/issues/6552#issuecomment-428900540

Hopefully this solves your issue.

Peace ✌

[unaor]

I also need it as im using the pSelectableRow in the tr to execute some formating option on the row

[hugonoro]

Hi guys, I have found the solution,

This is the actual code from their website docs for checkbox-selection for p-table,
If you observe carefully they have not used [pSelectableRow]="rowData" anywhere!!
Just check your code after removing that.

Also a member talked about it in another issue,
check out this link!
#6552 (comment)

Hopefully this solves your issue.

Peace ✌

How is this a solution? If you check the initial request the goal was to be able to select by checkbox multiple rows or by clicking in the row individually to perform additional actions. The example they have in the documentation does not allow you to do row selection by clicking on it. Hence the reason for not having the pSelectable row anywhere

[indrajitbnikam]

Hi guys, I have found the solution,

This is the actual code from their website docs for checkbox-selection for p-table,
If you observe carefully they have not used [pSelectableRow]="rowData" anywhere!!
Just check your code after removing that.
Also a member talked about it in another issue,
check out this link!
#6552 (comment)
Hopefully this solves your issue.
Peace ✌

How is this a solution? If you check the initial request the goal was to be able to select by checkbox multiple rows or by clicking in the row individually to perform additional actions. The example they have in the documentation does not allow you to do row selection by clicking on it. Hence the reason for not having the pSelectable row anywhere

@hugonoro There is no problem with the row selection, in the initial request read https://github.com/primefaces/primeng/issues/6045#issue-340288350, and FYI, have you tried the code for multiple checkbox selection on their website? It does not work. hence this is the solution which solves the initial request as well as documentation problem.

[vds-simon-lapointe]

It seems that adding $event.stopPropagation() fixes everything.

[nkm96]

It seems that adding $event.stopPropagation() fixes everything.

It's a good solution but doesn't work for me.