Using p-dropdown as a filter in p-dataTable

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
curl-usluge
Posts: 3
Joined: 13 Aug 2017, 11:25

20 Aug 2017, 19:42

I'm trying to use a dropdown as a filter in a dataTable. The problem is that when a dropdown is clicked, the list of items is not rendered (actually, it seems to be rendered below the rows).

This is the data table in question:

Code: Select all

<p-dataTable [value]="documents" [style]="{'margin-bottom':'20px'}" selectionMode="single"
                   [rows]="20" [paginator]="true" [pageLinks]="5" [rowsPerPageOptions]="[20,50,100]"
                   resizableColumns="true"
                   [loading]="loading" loadingIcon="fa-spinner"
                   [lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="loadDocumentsPage($event)"
                   sortField="sentDate" [sortOrder]="-1">
        <p-column field="from.name" header="From" sortable="true"></p-column>
        <p-column field="to.name" header="To" sortable="true"></p-column>
        <p-column field="documentType" header="Type" sortable="true"></p-column>
        <p-column field="documentNumber" header="Number" sortable="true"></p-column>
        <p-column field="documentDate" header="Date" sortable="true"></p-column>

        <p-column field="status" header="Status" [filter]="true" filterMatchMode="equals">
          <ng-template pTemplate="filter">
            <p-dropdown [options]="possibleStatuses" [style]="{'width':'100%'}" styleClass="ui-column-filter"></p-dropdown>
          </ng-template>
        </p-column>
      </p-dataTable>
And this is the result:

Image

curl-usluge
Posts: 3
Joined: 13 Aug 2017, 11:25

22 Aug 2017, 16:17

The screenshot - this time for real :

Image

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

08 Sep 2017, 16:31

Please try;

Code: Select all

<p-dropdown [options]="possibleStatuses" [style]="{'width':'100%'}" styleClass="ui-column-filter" appendTo="body"></p-dropdown>

curl-usluge
Posts: 3
Joined: 13 Aug 2017, 11:25

27 Sep 2017, 08:19

Works really well this way! Not just for dropdown, but for any component that has a popup of sorts...

Post Reply

Return to “Paradise - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests