CODEWITHSUNDEEP
angularprimeng
Tim
Tim

Reputation: 4274

How to filter over a PrimeNg DataTable column with ng-template?

This is my column:

<p-column header="Roles" sortable="true" [filter]="true" filterMatchMode="contains">
  <ng-template let-user="rowData" pTemplate="body">
    <div *ngFor="let role of user.roles">
      {{role.name}}
    </div>
  </ng-template>
</p-column>

Examples of user.roles JSON:

[ { "id": 3, "name": "A single role" } ]
[ { "id": 4, "name": "A role name" }, { "id": 6, "name": "Another role name" } ]

I would like to add a filter on it - I tried adding this ng-template:

<ng-template pTemplate="filter" let-col let-test="rowData">
        <p-multiSelect [options]="roles" defaultLabel="All roles" (onChange)="dt.filter($event.value,test.roles,col.filterMatchMode)"
          styleClass="ui-column-filter"></p-multiSelect>
 </ng-template>

The multiselect's options are in a separate roles array:

this.roles = [];
this.roles.push({ label: 'A role', value: 'aRole' });
this.roles.push({ label: 'Another role', value: 'anotherRole' });

... but for some reason, I get this error:

Cannot read property 'roles' of undefined

Upvotes: 4

Views: 15105

Answers (2)

Tim
Tim

Reputation: 4274

According to the official forum, what I wanted is not possible. A "field" is required. As a workaround, I flattened my roles array into a string and displayed this in a field. I can now filter it with the matchmode "contains"

Upvotes: 4

Chandru
Chandru

Reputation: 11184

Try like this :

check your primeng node_module version am doing 4.2.1 primeng

module.ts

import DataTableModule and MultiSelectModule lik your app.module file

import { DataTableModule, MultiSelectModule } from 'primeng/primeng';

@NgModule({
    imports: [
        DataTableModule,
        MultiSelectModule
    ]
})

component.ts

export class AppComponent implements OnInit {

    private users: Array<any> = [];
    private roles: Array<any> = [];

    constructor() { }

    ngOnInit() {
        this.users = [];
        this.users.push({ "id": 3, "name": "anotherRole" });
        this.users.push({ "id": 4, "name": "aRole" }, { "id": 6, "name": "anotherRole" });


        this.roles = [];
        this.roles.push({ label: 'A role', value: 'aRole' });
        this.roles.push({ label: 'Another role', value: 'anotherRole' });
    }
}

component.html

<p-dataTable [value]="users" [rows]="4" [paginator]="true" [globalFilter]="gb" #dt>
<p-header>List of Cars</p-header>
<p-column field="id" header="ID"></p-column>
<p-column field="name" header="Name" [filter]="true" filterMatchMode="in">
    <ng-template pTemplate="filter" let-col>
        <p-multiSelect [options]="roles" defaultLabel="All Colors" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
    </ng-template>
</p-column>
</p-dataTable>

Upvotes: 0

Related Questions