IgbGrid – プログラムから選択した行を削除する方法

選択した行をプログラムから削除する方法について解説します。

IgbGrid の設定

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

<IgbGrid @ref="grid"         
         PrimaryKey="@nameof(Person.Id)"
         RowSelection="GridSelectionMode.Single">
    ....
</IgbGrid>

DeleteRowAsync メソッドの使用

次に、選択した行を削除するためのメソッドを実装します。選択された行の Id を引数に渡して削除を実行します。
SelectedRowsプロパティを使用して、現在選択されている行のデータを取得します。このプロパティには、選択されている行のリストが含まれていますが、今回の設定では行の選択が1つに制限されているため、最初の要素のみを取得する形となります。

private IgbGrid? grid;
private async Task OnClickRowDelete()
{
    if (this.grid is null) return;
    var person = this.grid.SelectedRows?.FirstOrDefault() as Person;
}

次に、DeleteRowAsync メソッドを呼び出し、選択された行のIdを引数に渡して削除処理を実行します。

private IgbGrid? grid;
private async Task OnClickRowDelete()
{
    if (this.grid is null) return;
    var person = this.grid.SelectedRows?.FirstOrDefault() as Person;

    if (person is null) return;
    await this.grid.DeleteRowAsync(person.Id);
}

ボタンで行を削除するをクリアする

削除ボタンをクリックすると、選択した行が削除されるように @onclick イベントを設定します。

<IgbButton @onclick="OnClickRowDelete">選択行の削除</IgbButton>

実行結果