方法
IgbGrid 内のセルを編集すると、他のセルの値が自動的に計算され更新される機能を実装した例を紹介します。例として、ユーザーが距離の単位をセンチメートル、メートル、キロメートルのいずれかで入力できるようにしました。
これらの値から一つの単位が変更されると、他の単位もそれに応じて自動的に更新するようにします。
IgbGrid の設定
セルの編集が完了した際に他のセルの値を更新するため OnCellEditDone イベントハンドラーを実装します。
<IgbGrid ....
Data="_people"
@ref="grid"
PrimaryKey="@nameof(Person.Id)"
CellEditDone="OnCellEditDone">
イベントハンドラーの実装
ユーザーが IgbGrid 内のセルを編集すると、OnCellEditDone イベントがトリガーされます。このイベントハンドラーを実装して、編集されたセルに基づいて他のセルの値を更新します。
例としてメートル列を編集した場合の、他列への換算方法を記します。
public void OnCellEditDone(IgbGridEditDoneEventArgs args)
{
....
// 編集されたセルの行IDを取得し、_people リスト内で対応するデータオブジェクトを検索します
int rowId = int.Parse(args.Detail.CellID.RowID);
var dataIndex = _people.FindIndex(data => data.Id == rowId);
// データオブジェクトが見つかった場合
if (dataIndex >= 0)
{
var targetData = _people[dataIndex];
// 編集されたフィールドに基づいて、他の単位の値を計算します
// 例えば、ユーザーが「メートル」セルを編集した場合、以下の計算が行われます
if (editedField == "meter")
{
targetData.centimeter = targetData.meter * 100;
targetData.kilometer = targetData.meter / 1000;
}
....
// 「メートル」セルを編集し終えた後、その変更を IgbGrid に反映させます
grid?.UpdateCell(targetData.meter, rowId, "meter");
....
}
}
}
この実装により、ユーザーがセルの値を編集すると、他の単位も自動的に換算されて更新されます。
実行結果
