IgxGrid – FilteringStrategyを使用してカスタムのフィルタリングを行う

IgxGrid のフィルター機能はバインドされたデータの値を使用して実行されます。そのため、例えば Date 型のデータがバインドされた列で表示を時間のみに制限した場合、フィルター時に入力値が正しいにも関わらず、年月部分等の値が異なるために検索にヒットしないことがあります。

以下のグリッドで表示を HH:mm 形式としている「Order Date」列に対して “6:30” でフィルターを実行したい場合、

フィルターセルに “6:30” を入力しても該当行がヒットしません。

このような場合は、カスタムの FilteringStrategy を記述してフィルター時の検索ロジックを上書きします。

以下のように FilteringStrategy クラスを継承して CustomFilterStrategy クラスを作成し、 findMatchByExpression ファンクションをオーバーライドします。

export class CustomFilterStrategy extends FilteringStrategy {
  public override findMatchByExpression(rec: object, expr): boolean {
    const cond = expr.condition;
    const val =
      expr.fieldName === 'OrderDate'
        ? this.getFormattedDate(
            this.getFieldValue(rec, expr.fieldName),
            expr.searchVal
          )
        : this.getFieldValue(rec, expr.fieldName);
    return cond.logic(val, expr.searchVal);
  }
  //searchValue の日付（年/月/日）はそのままにして、時刻（時/分）だけを dataValue に合わせた Date を作成する
  public getFormattedDate(dataValue: Date, searchValue: Date) {
      const result = new Date(searchValue); // searchValue をコピーする
      result.setHours(dataValue.getHours(), dataValue.getMinutes(), 0, 0); // 時・分を合わせる
      return result;
  }
}

作成した CustomFilterStrategy クラスのインスタンスを <igx-grid> の filterStrategy プロパティに割り当てます。

<igx-grid ..... [filterStrategy]="strategy">
.....
</igx-grid>

public strategy = new CustomFilterStrategy();

“6:30” の行が正しくフィルタリングされるようになりました。