I need to build a function that checks all radio buttons (p-radioButton) in a single column contained in a p-table. I will have a 'select all' radio button in the table header for three columns consisting of radio buttons. The table header radio button will be mutually exclusive for the three columns of the p-table. When clicking column 1 'select all' radio button, it selects all radio buttons in column 1 and unselects all previously selected radio buttons in column 2 and column 3. When clicking column 2 'select all' radio button, it selects all radio buttons in column 2 and unselects all previously selected radio buttons in column 1 and column 3. When clicking column 3 'select all' radio button, it selects all radio buttons in column 3 and unselects all previously selected radio buttons in column 1 and column 2. I have jQuery installed in my Angular app, so I can use it or plain vanilla JavaScript. I already have functionality to make each table row mutually exclusive for the three radio button columns so I expect that the 'select all' radio button when selected will inherit the same functionality for each table row. Can anyone help me achieve this functionality using the PrimeNG radio buttons (p-radioButton) and p-table? Thanks so much. Jeff
I added jQuery to my Angular solution and tested it. It is working correctly so I tried this:
The (click) event "onCheckAll($(this))" function was suggested here: Selecting multiple radio buttons with "Select All" option
onCheckAll(e) {
if (e.hasClass('allPrimary'))
{
$('.primary').prop('checked', true)
}
else if (e.hasClass('allSecondary'))
{
$('.secondary').prop('checked', true)
}
else (if (e.hasClass('allNotAuthorized'))
{
$('.notInCounty').prop('checked', true)
}
}
<ng-template pTemplate="header">
<tr>
<th pResizableColumn >County</th>
<th pResizableColumn style="text-align:center">Primary
<br />
<p-radioButton
name="all"
class="allPrimary"
(click)="onCheckAll($(this))"
>
</p-radioButton>
</th>
<th pResizableColumn style="text-align:center">Secondary
<br />
<p-radioButton
name="all"
class="allSecondary"
(click)="onCheckAll($(this))">
</p-radioButton>
</th>
<th pResizableColumn style="text-align:center">Not Authorized
<br />
<p-radioButton
name="all"
class="allNotAuthorized"
(click)="onCheckAll($(this))">
</p-radioButton>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-areaOfOperationAll let-rowIndex="rowIndex">
<tr>
<td >
{{areaOfOperationAll.County.DisplayName}}
</td>
<td style="text-align:center">
<p-radioButton
name="county-primary-{{rowIndex}}"
class="primary"
[value]="true"
[(ngModel)]="areaOfOperationAll.IsRankPrimary"
inputId="county-primary-{{rowIndex}}"
(click)="onRankChange('IsRankPrimary',rowIndex)">
</p-radioButton>
</td>
<td style="text-align:center">
<p-radioButton
name="county-secondary-{{rowIndex}}"
class="secondary"
[value]="true"
[(ngModel)]="areaOfOperationAll.IsRankSecondary"
inputId="county-secondary-{{rowIndex}}"
(click)="onRankChange('IsRankSecondary',rowIndex)">
</p-radioButton>
</td>
<td style="text-align:center">
<p-radioButton
name="county-na-{{rowIndex}}"
class="notInCounty"
[value]="true"
[(ngModel)]="areaOfOperationAll.IsRankVendorNotInCounty"
inputId="county-na-{{rowIndex}}"
(click)="onRankChange('IsRankVendorNotInCounty',rowIndex)">
</p-radioButton>
</td>
</tr>
</ng-template>
Error: I was getting a red squiggly line under the $ in the call (click)="onCheckAll($(this))" so I removed it to look like this (click)="onCheckAll(this)" After making that change, the click event called the function correctly but then I started receiving this error in the console: TypeError: e.hasClass is not function.
Using Angular with JQuery isn't a good practice since both are manipulating DOM. Instead without using JQuery you can accomplish what you need by introducing a boolean flag to hold the selection of each column and introducing a function/method to handle SelectAll() functionality. Also, bind the p-radioButton checked status to your component's data model.
In you component.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
areasOfOperation: any[] = [
{ County: { DisplayName: 'County 1' }, IsRankPrimary: false, IsRankSecondary: false, IsRankVendorNotInCounty: false },
];
allPrimarySelected = false;
allSecondarySelected = false;
allNotAuthorizedSelected = false;
selectAll(column: string) {
this.allPrimarySelected = column === 'primary';
this.allSecondarySelected = column === 'secondary';
this.allNotAuthorizedSelected = column === 'notAuthorized';
this.areasOfOperation.forEach(area => {
area.IsRankPrimary = column === 'primary';
area.IsRankSecondary = column === 'secondary';
area.IsRankVendorNotInCounty = column === 'notAuthorized';
});
}
}
In your component HTML :
<p-table [value]="areasOfOperation">
<ng-template pTemplate="header">
<tr>
<th pResizableColumn>County</th>
<th pResizableColumn style="text-align:center">Primary
<br />
<p-radioButton
name="allPrimary"
[checked]="allPrimarySelected"
(click)="selectAll('primary')">
</p-radioButton>
</th>
<th pResizableColumn style="text-align:center">Secondary
<br />
<p-radioButton
name="allSecondary"
[checked]="allSecondarySelected"
(click)="selectAll('secondary')">
</p-radioButton>
</th>
<th pResizableColumn style="text-align:center">Not Authorized
<br />
<p-radioButton
name="allNotAuthorized"
[checked]="allNotAuthorizedSelected"
(click)="selectAll('notAuthorized')">
</p-radioButton>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-areaOfOperation let-rowIndex="rowIndex">
<tr>
<td>{{areaOfOperation.County.DisplayName}}</td>
<td style="text-align:center">
<p-radioButton
name="county-primary-{{rowIndex}}"
[checked]="areaOfOperation.IsRankPrimary"
(click)="areaOfOperation.IsRankPrimary = !areaOfOperation.IsRankPrimary; areaOfOperation.IsRankSecondary = false; areaOfOperation.IsRankVendorNotInCounty = false">
</p-radioButton>
</td>
<td style="text-align:center">
<p-radioButton
name="county-secondary-{{rowIndex}}"
[checked]="areaOfOperation.IsRankSecondary"
(click)="areaOfOperation.IsRankSecondary = !areaOfOperation.IsRankSecondary; areaOfOperation.IsRankPrimary = false; areaOfOperation.IsRankVendorNotInCounty = false">
</p-radioButton>
</td>
<td style="text-align:center">
<p-radioButton
name="county-na-{{rowIndex}}"
[checked]="areaOfOperation.IsRankVendorNotInCounty"
(click)="areaOfOperation.IsRankVendorNotInCounty = !areaOfOperation.IsRankVendorNotInCounty; areaOfOperation.IsRankPrimary = false; areaOfOperation.IsRankSecondary = false">
</p-radioButton>
</td>
</tr>
</ng-template>
</p-table>