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

IgbGrid の設定

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

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

SelectAllRowsAsync メソッドの使用

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

private async Task SelectAllRows()
{
    if (grid == null) return;
    await grid.SelectAllRowsAsync();
}

SelectAllRowsAsyncメソッドを呼び出すだけで、グリッド内のすべての行が即座に選択状態になります。

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

<IgbButton @onclick="SelectAllRows">すべての行の選択</IgbButton>

実行結果

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

関連ドキュメント

Tagged:

製品について

Ignite UI for Blazor