0

Initial UI (Without filter):

[globalFilterFields]="['name','marketingName','m_id']"

Initial UI

Issue : Other column fields are skipped after match found in first column

Here, we are searching "Model" which is present in first as well as in second column. But, it's not considering second column.

enter image description here

Expectations : first 3 rows should be shown that are Database, Dataset1, Model

Stackblitz : https://stackblitz.com/edit/primeng-treetablefilter-demo-efg4b5?file=src/assets/filesystem.json

Kindly expand module and then search using "Model" in global search.

We have search box to filter rows of p-treeTable by using global filter as shown below :

<input #searchBox type="text" [(ngModel)]="searchText" pInputText class="searchBox"
          placeholder="Search"
          (input)="tt.filterGlobal($event.target.value, 'contains')" />

Column Definition mapped to TreeTable looks like below:

this.columns = [
      { field: "name", header: "Name", width: '38%' },
      { field: "marketingName", header: "marketingName", width: '19%' },
      { field: "m_id", header: "M ID", width: '16%' },
      { field: "operation", header: "Operation", width: '7%' }
    ];

TreeTable Code:

<p-treeTable #tt [value]="businessUnit" [columns]="columns" selectionMode="single"
          [(selection)]="selectedTreeProgram" dataKey="name" (onNodeSelect)="onNodeSelect(true)"
          (onNodeUnselect)="onNodeSelect(false)" [globalFilterFields]="['name','marketingName','m_id']">
          <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
              <col *ngFor="let col of columns" [style.width]="col.width">
            </colgroup>
          </ng-template>
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th *ngFor="let col of columns" style="display: none">
                {{col.header}}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr class="bu-row" [id]="utils.getId(rowData['name'])">
              <td *ngIf="!rowData['m_id']"> 
                  <div class="combine name">{{rowData['name']}}</div>
              </td>
              <td>
                //Dummy
              </td>
              <td>
                //Dummy
              </td>
              <td>
                //Dummy
              </td>
            </tr>
            <tr *ngIf="rowData['m_id']" [ttRow]="rowNode" [ttSelectableRow]="rowNode" class="tree-child-row">
              <td>
                   //Icons
                  <div class="combine name">{{rowData['name']}}</div>
              </td>
              <td>
                <div class="combine">{{rowData['marketingName']}}</div>
              </td>
              <td>
                <div class="combine">{{rowData['m_id']}}</div>
              </td>
              <td>
                    //Edit Delete Icon
              </td>
            </tr>
          </ng-template>
        </p-treeTable>
Vaibhav Sawant
  • 341
  • 1
  • 7
  • 22
  • Can you add sample data for businessUnit – Yogen Darji Aug 19 '21 at 05:29
  • Please find below Stacklitz URL : https://stackblitz.com/edit/primeng-treetablefilter-demo-efg4b5?file=src/assets/filesystem.json . Expand Module and in global search, please search using "Model" – Vaibhav Sawant Aug 27 '21 at 14:17

0 Answers0