IgbGrid – セルのツールチップ内容をカスタマイズしたい

IgbGrid において、BodyTemplateまたはBodyTemplateScriptを利用し、ツールチップを表示する方法について説明します。
これにより、各セルに対して詳細情報をツールチップとして表示することができます。

BodyTemplate を使用する方法

まず、GetDescriptionメソッドを作成し、特定の行に対するツールチップの内容を取得します。

private string GetDescription(IgbCellTemplateContext context)
{
    var grid = context.Parent as IgbGrid;
    var rows = grid?.Data as List;
    var rowId = int.Parse(context.Cell.Id.RowID);
    var row = rows?.First(r => r.Id == rowId);
    return row?.Description ?? "No Description";
}

次に、BodyTemplateを使用してセルの値を表示し、ツールチップを設定します。ここで、title属性を使用してツールチップの内容を設定します。

    
        @{
            var description = GetDescription(context);
        }
        
            @context.Cell.Value
        
    

BodyTemplateScript を使用する方法

次に、BodyTemplateScriptを使ってツールチップを表示します。
以下のスクリプトを使用して、カスタムテンプレートを登録します。ここでも、title属性を使用してツールチップの内容を設定します。

igRegisterScript("descriptionTemplate", (context) => {
    const html = window.igTemplating.html;
    const description = context.cell.row.data.Description;
    return html`${context.cell.value}`;
}, false);

BodyTemplateScriptを使用する列も定義します。

これらの実装より、各セルに対して詳細情報がツールチップとして表示されます。

実行結果

関連ドキュメント

• IgbGrid – セルのテンプレート内から、該当する行データや、同行の任意の列値を参照する方法 – INFRAGISTICS ナレッジ ベース
• Ignite UI for Blazor – igTemplating の使い方 – INFRAGISTICS ナレッジ ベース