IgbGrid – ダブルクリックで行データを取得したい

IgbGrid では、ユーザーが行をダブルクリックしたときに、特定の行のデータを取得して処理することが可能です。本記事では、IgbGrid の行をダブルクリックした際に行データを取得し、JavaScript でアラート表示する方法 を解説します。

IgbGrid の設定

行のダブルクリックを取得するには、IgbGrid のDoubleClickイベントにハンドラを設定します。

<IgbGrid ....
         @ref="grid"
         DoubleClick="OnDoubleClick">    
    ....
</IgbGrid>

イベントハンドラの登録

DoubleClickイベントハンドラでは、クリックされたセルの情報を含むIgbGridCellEventArgsが引数として渡されます。この引数から行 ID を取得し、データソースから該当のデータを検索します。以下の例では、取得した行ID (args.Detail.Cell.Id.RowID) を利用して、データソース（_peopleリスト）から該当するオブジェクトを特定しています。

private async Task OnDoubleClick(IgbGridCellEventArgs args)
{
    // ダブルクリックされた行の ID を取得
    if (!int.TryParse(args.Detail.Cell.Id.RowID, out int rowId)) return;

    // データソースから該当の Person を取得
    var person = _people.FirstOrDefault(p => p.Id == rowId);
    if (person is null) return;

    // JavaScript でアラート表示
    await JS.InvokeVoidAsync("alert",
        $"氏名: {person.Name}\n年齢: {person.Age}\n職種: {person.JobTitle}\n入社日: {person.HireDate:yyyy/MM/dd}");
}

実行結果

ユーザーが行をダブルクリックすると、対象行の 氏名・年齢・職種・入社日 がポップアップで表示されます。

関連ドキュメント

• Class IgbGridBaseDirective