CODEWITHSUNDEEP
angularprimengprimeng-datatable
Jan69
Jan69

Reputation: 1139

In primeng Datatable custom filter not working

I have a datatable with column Org . Distinct list of orgs are in an array. How to add this list in the column filter dropdown box. When i try to add the options with the list , drop down displays with no value.can someone please let me know how to add dynamic values in the dropdown?

<p-column  field="org" header ="Org" [sortable]="true" [filter]="true" filterMatchMode="equals">
        <ng-template pTemplate="filter" let-col>
          <p-dropdown [options]="orgGroupList" [style]="{'width':'100%'}"  styleClass="ui-column-filter"></p-dropdown>
        </ng-template>
      </p-column>


this.orgGroupList = 2,3,4,5,6,7

Upvotes: 1

Views: 6079

Answers (2)

Jan69
Jan69

Reputation: 1139

It worked after including appendTo="body" in the drop down tag

<ng-template pTemplate="filter" let-col>
          <p-dropdown [options]="orgs" [(ngModel)]="selectedOrg" appendTo="body" [style]="{'width':'100%'}"  (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
        </ng-template>

Upvotes: 1

gio
gio

Reputation: 397

[options] should be array of SelectItem interface objects. Each item should include label and value properties:

{label: 'MyDisplayValue', value: 1}

In your code you pass array of integers (this.orgGroupList = 2,3,4,5,6,7) as [options] input. Change it to array of SelectItem interface objects.

For reference you can see official example source code at: https://www.primefaces.org/primeng/#/datatable/filter

Upvotes: 1

Related Questions