IgbGrid – プログラムからフィルターをクリアする方法

特定の列のフィルター、および全てのフィルターをプログラムからクリアする方法について解説します。

IgbGrid の設定

まず、IgbGrid コンポーネントを@refディレクティブで参照できるように設定します。

<IgbGrid AllowFiltering="true" 
         FilterMode="FilterMode.ExcelStyleFilter"
         @ref="grid">
    ....
</IgbGrid>

ClearFilterAsync メソッドの使用

フィルターをクリアするには、ClearFilterAsync メソッドを使用します。これにより、列ごとや全体のフィルターを簡単に解除できます。

• 特定の列のフィルターをクリアする場合、クリアしたい列のフィールド名（例えば “Name”）をClearFilterAsync メソッドの引数として渡します。
• すべてのフィルターをクリアするには、引数を空文字 (“”) にすることで全列のフィルターを一度に解除できます。

以下は、氏名列のフィルターを解除する ClearNameFilter メソッドと、すべてのフィルターをクリアするClearAllFilter メソッドの例です。

private IgbGrid? grid;
private async Task ClearNameFilter()
{
    if (grid != null)
    {
        await grid.ClearFilterAsync("Name");
    }
}
private async Task ClearAllFilter()
{
    if (grid != null)
    {
        await grid.ClearFilterAsync("");
    }
}

ボタンでフィルターをクリアする

以下のコードは、フィルターをクリアするためのボタン設定です。ボタンをクリックすることで、それぞれのメソッドが呼び出され、フィルターがクリアされます。

<IgbButton @onclick="ClearNameFilter">氏名のフィルターをクリア</IgbButton>
<IgbButton @onclick="ClearAllFilter">全てのフィルターをクリア</IgbButton>