選択した行をプログラムから削除する方法について単一行選択時の例を元に解説します。
Ignite UI for Blazor の仕様変更よりお使いのバージョンによって行の削除方法が異なります。
本記事では仕様が変わるバージョン 24.2.** 以降と以前に分けてご紹介します。
バージョン 24.2.** 以降の方法
IgbGrid の設定
まず、IgbGrid コンポーネントを @ref ディレクティブで参照できるように設定します。
<IgbGrid @ref="grid"
PrimaryKey="@nameof(Person.Id)"
RowSelection="GridSelectionMode.Single">
....
</IgbGrid>
DeleteRowAsync メソッドの使用
次に、選択した行を削除するためのメソッドを実装します。選択された行の Id を引数に渡して削除を実行します。
SelectedRows プロパティを使用して、現在選択されている行のデータを取得します。このプロパティには、選択されている行のリストが含まれていますが、今回の設定では行の選択が1つに制限されているため、最初の要素のみを取得する形となります。
以下のコードでは、SelectedRows のデータを int 型の配列に変換しています。
private async Task OnClickRowDelete()
{
if (this.grid?.SelectedRows is null) return;
int[] selectedRowKeys = Array.ConvertAll<object, int>(
this.grid.SelectedRows, o => Convert.ToInt32((double)o)
);
}
次に、DeleteRowAsync メソッドを呼び出し、選択された行の Id を引数に渡して削除処理を実行します。
private async Task OnClickRowDelete()
{
if (this.grid?.SelectedRows is null) return;
int[] selectedRowKeys = Array.ConvertAll<object, int>(
this.grid.SelectedRows, o => Convert.ToInt32((double)o)
);
if (selectedRowKeys.Length == 0) return;
await this.grid.DeleteRowAsync(selectedRowKeys[0]);
}
ボタンで行を削除する
削除ボタンをクリックすると、選択した行が削除されるように @onclick イベントを設定します。
<IgbButton @onclick="OnClickRowDelete">選択行の削除</IgbButton>
実行結果
——————————————————————————————————————–
バージョン 24.1.** 以前の方法
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>
実行結果
