IgbGrid を使用して、コードビハインドですべての行の選択を一括解除する方法について解説します。

IgbGrid の設定

まず、IgbGrid を使用してデータを表示する準備をします。@ref ディレクティブを使って、IgbGrid を参照できるように設定します。
以下のコード例では、複数行を選択できるようにRowSelectionGridSelectionMode.Multipleに設定しています。

<IgbGrid Data="_people"
        @ref="grid"
        PrimaryKey="@nameof(Person.Id)"
        RowSelection=GridSelectionMode.Multiple
        AutoGenerate="false">
        ....
</IgbGrid>

DeselectAllRowsAsync メソッドの使用

次に、すべての行の選択を一括解除するためにDeselectAllRowsAsyncメソッドを使用して、グリッド内のすべての行を選択します。

private async Task DeSelectAllRows()
{
    if (grid == null) return;
    await grid.DeselectAllRowsAsync();
}

DeselectAllRowsAsyncメソッドを呼び出すだけで、グリッド内のすべての行の選択が即座に解除されます。

最後に、ボタンのクリックイベントなどで上記のメソッドを呼び出します。

<IgbButton @onclick="DeSelectAllRows">すべての行の選択解除</IgbButton>

実行結果

この実装により、「すべての行の選択解除」ボタンをクリックするだけで、IgbGrid 内のすべての行の選択が一括で解除されます。

関連ドキュメント

Tagged:

製品について

Ignite UI for Blazor