Primeng: Customizable ContextMenu selection mode for Table and TreeTable

[ctrl-brk]

I'm submitting a ... (check one with "x")

[x] feature request

Current behavior
Currently left and right (when context menu is enabled) clicks maintain their own selection list, highlight items differently and so on. This is new functionality added to p-table in comparison with datatable.

Expected behavior
Add optional ability to make p-table selection like it was in old datatable, selecting items by both clicks and maintain a single selection list.

[cyberrranger]

you can use [(contextMenuSelection)]="selectedContext" and (onContextMenuSelect)="generateContext($event)" to add selectedContext to [(selection)]="selected"

[sivakumar55]

I am facing same issue
-> Context menu row selected style(right click) not clearing, after table row selection (left click)
Please suggest any solution.

[cyberrranger]

oh, same problem with selected item with my solution :/

[toregua]

+1
Same problem for me

[toregua]

I have found a solution just by playing with sass (css) like this for exemple :

body {
    .ui-table {
        .ui-table-tbody {
            &>tr {
                &:nth-child(odd) {
                    background-color: #f4f4f4;
                    &.ui-contextmenu-selected {
                        background-color: #f4f4f4;
                    }
                }
                &:nth-child(even) {
                    background-color: #fff;
                    &.ui-contextmenu-selected {
                        background-color: #fff;
                    }
                }
                &.ui-contextmenu-selected,
                &:nth-child(odd).ui-contextmenu-selected {
                    color: #000;
                    &.ui-state-highlight {
                        color: #fff;
                    }
                    .ui-panel,
                    .ui-table {
                        color: #000 !important;
                    }
                }
                &.ui-state-highlight,
                &:nth-child(odd).ui-state-highlight,
                &:nth-child(even).ui-state-highlight {
                    background-color: #89C487;
                    .ui-panel,
                    .ui-table {
                        color: #000 !important;
                    }
                }
            }
        }
    }
}

After that it works like the old p-DataTable

[ctrl-brk]

@toregua, This is just visual representation. Still you have to deal with two different lists/selections and unable to unselect context menu selection. I need it to be just like old datatable. One selection for everything. @cyberrranger solution is just a hack.

[toregua]

@ctrl-brk you'are right, my solution look like old p-dataTable but needs to have [(selection)]="selected" and [(contextMenuSelection)]="selected" pointing on the same "selected" element.

[Chreggii]

Try this:
@ViewChildren(ContextMenuRow) contextMenuRows: QueryList;

Unselect all context menu rows, when you select a row.
Use this to unselect all context menu rows:
this.contextMenuRows.forEach(r => r.selected = false)

[cagataycivici]

New contextMenuSelectionMode="separate|joint" allows customization of this behavior. An example with "joint" where row selection and context menu uses the same selection property.

<p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar" [contextMenu]="cm" contextMenuSelectionMode="joint">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData" [pContextMenuRow]="rowData">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

<p-contextMenu #cm [model]="items"></p-contextMenu>