PrimeNg GlobalFilter : Stop searching after finding match in first column (Not looking for values in subsequent columns)

537 Views Asked by At

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>
0

There are 0 best solutions below