Can two field names be assigned on the igx column?

Question

I have multiple fields on my grid. Here is the code

<igx-column [field]="'IndustrySector'" dataType="string" [sortable]="true">
      <!-- I need to search with this two below fields-->
      <ng-template igxCell let-cell="cell">
        <div class="row">
          <div>
            <b> {{ cell.row.data.IndustrySector }} </b>
          </div>
          <div>
            {{ cell.row.data.IndustryGroup }}
          </div>
        </div>
      </ng-template>
    </igx-column>
    <!-- <igx-column [field]="'IndustryGroup'" dataType="string" [sortable]="true"></igx-column> -->
    <igx-column
      [field]="'SectorType'"
      dataType="string"
      [sortable]="true"
    ></igx-column>

I need to perform the search operations. It only works with whichever name I mention in [field]="'IndustrySector.'" It's not able to search with a second value like IndustryGroup.

Is there any solution for multiple names being in one igx column? Then, What should be the best approach for searching?

Answer 1

You need to use the igxTextHighlight to do this, please find below a working example for your reference!

Note: It does not work perfectly, but its possible to do.

html

<igx-grid
    [igxPreventDocumentScroll]="true"
    #grid1
    id="grid1"
    [data]="data"
    [autoGenerate]="false"
    height="480px"
    width="100%"
    [allowFiltering]="true"
  >
    <igx-column [field]="'IndustrySector'" dataType="string" [sortable]="true">
      <ng-template igxCell let-cell="cell" let-val>
        <div class="row">
          <div>
            <div
              igxTextHighlight
              class="igx-grid__td-text"
              [cssClass]="cell.highlightClass"
              [activeCssClass]="'igx-highlight--active'"
              [row]="cell.row.data"
              [column]="cell.column.field"
              [containerClass]="'igx-grid__td-text'"
              [groupName]="'grid1'"
              [value]="val"
            >
              {{ val }}
            </div>
          </div>
          <div>
            <div
              igxTextHighlight
              class="igx-grid__td-text"
              [cssClass]="cell.highlightClass"
              [activeCssClass]="'igx-highlight--active'"
              [row]="cell.row.data"
              [column]="'IndustryGroup'"
              [containerClass]="'igx-grid__td-text'"
              [groupName]="'grid1'"
              [value]="cell.row.data.IndustryGroup"
            >
              {{ cell.row.data.IndustryGroup }}
            </div>
          </div>
        </div>
      </ng-template>
    </igx-column>
    <!-- <igx-column
      [field]="'IndustryGroup'"
      dataType="string"
      [sortable]="true"
    ></igx-column> -->
    <igx-column
      [field]="'SectorType'"
      dataType="string"
      [sortable]="true"
    ></igx-column>
    <igx-column
      [field]="'KRD'"
      dataType="number"
      [sortable]="true"
    ></igx-column>
    <igx-column
      [field]="'MarketNotion'"
      dataType="number"
      [sortable]="true"
    ></igx-column>
    <igx-column [field]="'Date'" dataType="date" [sortable]="true"></igx-column>
  </igx-grid>

ts

import {
  Component,
  OnInit,
  QueryList,
  ViewChild,
  ViewChildren,
} from '@angular/core';
import { IgxGridComponent, IgxTextHighlightDirective } from 'igniteui-angular';
import { MARKET_DATA } from './data';

@Component({
  selector: 'app-grid-search-sample',
  styleUrls: ['./grid-search-sample.component.scss'],
  templateUrl: './grid-search-sample.component.html',
})
export class GridSearchSampleComponent implements OnInit {
  @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;

  @ViewChildren(IgxTextHighlightDirective, { read: IgxTextHighlightDirective })
  highlightDirectives: QueryList<IgxTextHighlightDirective>;
  public data: any[];
  public searchText = '';
  public caseSensitive = false;
  public exactMatch = false;

  public ngOnInit(): void {
    this.data = MARKET_DATA;
  }

  public clearSearch() {
    this.searchText = '';
    this.grid.clearSearch();
  }

  public searchKeyDown(ev) {
    const dirs = this.highlightDirectives.toArray();
    if (
      ev.key === 'Enter' ||
      ev.key === 'ArrowDown' ||
      ev.key === 'ArrowRight'
    ) {
      ev.preventDefault();
      this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch);
      for (const dir of dirs) {
        dir.highlight(this.searchText, this.caseSensitive, this.exactMatch);
      }
    } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
      ev.preventDefault();
      this.grid.findPrev(this.searchText, this.caseSensitive, this.exactMatch);
      for (const dir of dirs) {
        dir.highlight(this.searchText, this.caseSensitive, this.exactMatch);
      }
    }
  }

  public updateSearch() {
    const dirs = this.highlightDirectives.toArray();
    this.caseSensitive = !this.caseSensitive;
    this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch);
    for (const dir of dirs) {
      dir.highlight(this.searchText, this.caseSensitive, this.exactMatch);
    }
  }

  public updateExactSearch() {
    const dirs = this.highlightDirectives.toArray();
    this.exactMatch = !this.exactMatch;
    this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch);
    for (const dir of dirs) {
      dir.highlight(this.searchText, this.caseSensitive, this.exactMatch);
    }
  }
}

stackblitz

---

References:

1. IGX support answer