Problem PrimeNG Table Selection Checkbox Filter

UI Components for Angular
Post Reply
freelasp
Posts: 3
Joined: 20 May 2015, 02:54

22 Oct 2019, 00:02

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
Posts: 2
Joined: 22 Oct 2019, 11:38

22 Oct 2019, 12:36

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
Posts: 2
Joined: 22 Oct 2019, 11:38

23 Oct 2019, 09:26

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest