Problem PrimeNG Table Selection Checkbox Filter

[freelasp]

There is a problem with the Table component with checkbox selection using the filter. Selecting one filter and selecting everything will lose the selection of the others.

Has anyone ever experienced this ?

Thanks.

[Deepika]

Yes, I am facing the same issue. Can someone help?

My designation.component.html is as below.

Code: Select all

<p-table [columns]="cols" [value]="designations" [(selection)]="selectedDesignations" dataKey="vin">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 3em">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td>
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <ul>
            <li *ngFor="let designation of selectedDesignations" style="text-align: left">
                {{designation.designationId + ' - ' + designation.designationCode + ' - ' + designation.designationName }}
            </li>
        </ul>
    </ng-template>
</p-table> 

and then, I have the ts file as below -

Code: Select all

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { DesignationService } from './designation.service';
import { Designation } from 'src/app/shared/swagger/models';

@Component({
  selector: 'app-designation',
  templateUrl: './designation.component.html',
  styleUrls: ['./designation.component.css']
})
export class DesignationComponent implements OnInit {

  constructor(private designationService: DesignationService) { }

  error: string = null;
  designations: Designation[];
  selectedDesignations: Designation[];
  cols: any[];

  ngOnInit() {
    this.getDesignations();
    this.cols = [
      { field: 'designationId', header: 'Id' },
      { field: 'designationCode', header: 'Code' },
      { field: 'designationName', header: 'Name' },
  ];
  }

  getDesignations() {
    let designationObservable: Observable<Designation[]>;
    designationObservable = this.designationService.getDesignations();

    designationObservable.subscribe(
      (response: any) => {
        console.log(response.designations);
        this.designations = response.designations;
      },
      errorMessage => {
        console.log(errorMessage);
        this.error = errorMessage;
      });

  }
}

I have the Styles.cs file coded as below.

Code: Select all

/* You can add global styles to this file, and also import other style files */
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/nova-light/theme.css';

[Deepika]

Found the solution.

In the very first line,
<p-table #dt [columns]="cols" [value]="designations" [(selection)]="selectedDesignations" dataKey="designationId" should be the key that differentiates each row.

Regards,
Deepika

[Harshul mathur]

Hi Everyone,

I am facing a problem with radio button selection in primeng while using <p-table>.

On my UI I am getting an below error,

Code: Select all

TypeError: this.dt.selection.some is not a function
    at vendor.js:823209:229
    at Array.every (<anonymous>)
    at TableHeaderCheckbox.updateCheckedState (vendor.js:823209:200)
    at Object.next (vendor.js:823167:27)
    at ConsumerObserver.next (vendor.js:373339:25)
    at SafeSubscriber._next (vendor.js:373308:22)
    at SafeSubscriber.next (vendor.js:373281:12)
    at vendor.js:373118:20
    at errorContext (vendor.js:378021:5)
    at Subject.next (vendor.js:373111:69)
    

Can anyone help me out here?