IgbGrid – プログラムコードから列の絞り込み (フィルタ) を適用する方法

残念ながら本ナレッジベース記事を作成している時点、Ignite UI for Blazor v.23.1 では、Blazor 側の C# コードからこれを実現する機能はまだ用意されておりません。代わりに JavaScript 相互運用機能を用いて、JavaScript コードを併用することで表題の件を実現可能です。

まずは以下の JavaScript コードを用意します。これを wwwroot/igb-grid-filter.js というファイル名で保存します。

/**
 * Get IGC grid component in the container element that is specified by the selector.
 * 
 * @param {string} gridSelector
 * @returns {Promise<HTMLElement & any>}
 */
const getIgcGrid = async (gridSelector) => {

  const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

  for (let i = 0; i < 500; i++) {
    const grid = document.querySelector(gridSelector);
    if (grid !== null) return grid;
    await delay(10);
  }
  throw new Error(`Grid component could not found: selecter = "${gridSelector}"`);
}

/**
 * Apply filter for the IGC grid component.
 * 
 * @param {string} gridContainerSelector
 * @param {string} columnName
 * @param {any} value
 * @param {"boolean"|"date"|"dateTime"|"number"|"string"|"time"} operandName
 * @param {string} operatorName
 * @param {boolean} ignoreCase
 */
export const filter = async (gridContainerSelector, columnName, value, operandName, operatorName, ignoreCase) => {

  const grid = await getIgcGrid(gridContainerSelector);

  const operand = grid.getFilterFactory()[operandName + "FilteringOperand"];
  if (!operand) throw new Error(`Operand not found: ${operandName}`);

  const operator = operand.operations.find(op => op.name === operatorName);
  if (!operator) throw new Error(`Operator not found: ${operatorName} of ${operandName}`);

  grid.filter(columnName, value, operator, ignoreCase);
}

上記 JavaScript コードでは “filter” という JavaScript 関数を公開 (エクスポート) しています。この “filter” JavaScript 関数を、Blazor 内のコードから呼び出すことで、絞り込み (フィルタ) を適用できます。”filter” 関数の引数とその説明は下記コード例を参照ください。

@inject IJSRuntime JSRuntime
...
@* JavaScript 関数から適用対象の IgbGrid を識別できるよう、Id 属性を振っておきます *@
<IgbGrid Id="grid-1" ...>
  ...
</IgbGrid>
...
@code {
  private async Task ApplyFilterByCodeAsync(string text)
  {
    // JavaScript による支援関数を収めたモジュールを取得します。
    await using var jsModule = await this.JSRuntime.InvokeAsync<IJSObjectReference>("import", "./igb-grid-filter.js");

    // そのモジュールで公開されている filter 関数を呼び出し、グリッドへフィルターを適用します。
    await jsModule.InvokeVoidAsync("filter",
      "#grid-1",  // フィルタを適用する対象のグリッド要素を指定する CSS セレクター
      "Name",     // フィルタを適用する列の列名 (IgbColumn の Name パラメーターに指定した値)
      text,       // フィルタの条件となる文字列
      "string",   // フィルタ式の演算子セット名 (Operand Name)
      "contains", // 指定された演算子セットに収録されている内の、フィルタの条件となる演算子名 (Operator Name)
      true        // 大文字小文字を区別するかどうか (true で区別しない)
    );
}

また、上記 “filter” 関数の第 4 引数 (Operand Name) と第 5 引数 (Operator Name) に指定できる文字列の組み合わせは下表のとおりです。

下記リンク先から、実際に動作している様子を確認できます。

KB12342_BlazorWasmApp (igjp-kb-blazor.github.io)

なお、本ナレッジベース記事内のコード例は折り返しが見づらいかもしれません。すべてのコードは下記リンク先から参照・入手可能ですので、適宜、下記からアクセスしてください。