IgbTree – ノード選択時に、選択されているノードに紐づいているデータを取得する方法

IgbTree でノードを選択したときに、選択されているノードに紐づいているデータを取得したいといったことがあると思います。

その場合は、IgbTreeItem の Value パラメーター（object 型）が任意の用途で使用できますので、それを活用してください。

例えば Value パラメーターに元データの主キーなどを格納しておくことで、OnSelectionChanged イベントハンドラー内にて、選択されたツリーアイテムから、その Value パラメーター値を参照することで、バインド元のデータまでたどることが可能です。

@inject IJSRuntime JSRuntime
... (中略) ...
<IgbTree Selection="TreeSelection.Cascade" SelectionChanged="OnSelectionChanged">

    @foreach (var item in _SampleData)
    {
        @* IgbTreeItem の Value パラメーターに、バインド元のレコードのユニークID値を格納できます。 *@
        <IgbTreeItem Label="@item.Name" Value="@item.Id">
            @if (item.Children != null)
            {
                @foreach (var child in item.Children)
                {
                    <IgbTreeItem Label="@child.Name" Value="@child.Id"></IgbTreeItem>
                }
            }
        </IgbTreeItem>
    }
</IgbTree>

@code {
    /// <summary>サンプル用のデータ型です。</summary>
    private record CountryData(int Id, string Name, string JPName, IEnumerable<CountryData>? Children = null);

   ... (中略) ...

    /// <summary>
    /// ツリーアイテムの選択状態が変更されたときに呼び出され、選択されているツリーアイテムの Value パラメーター値をもとに、
    /// バインド元のレコードを特定し、日本語名を取り出してブラウザの alert で表示します。
    /// </summary>
    private async Task OnSelectionChanged(IgbTreeSelectionOptionsEventArgs args)
    {
        // 選択されたツリーアイテムから Value パラメーター値を収集
        var selectedItemValues = args
            .Detail
            .NewSelection
            .Select(item => item.Value);

        var selectedData = _SampleData
            // 2階層構造のバインド元のレコードを1次元構造にフラットに展開し、
            .SelectMany(data => new[] { data }.Concat(data.Children ?? Enumerable.Empty<CountryData>()))
            // Id の値が、選択されたツリーアイテムの Value パラメータに含まれるレコードを抽出、
            .Where(data => selectedItemValues.Contains(data.Id))
            // 日本語名を取り出す
            .Select(data => data.JPName);

        // 結果をブラウザの alert で表示
        await this.JSRuntime.InvokeVoidAsync("alert", "選択されたアイテムの日本語名: " + string.Join(", ", selectedData));
    }
}

実行結果