IgbGrid – ヘッダーのツールチップの内容を変更したい

IgbGrid のヘッダーツールチップの内容を変更する方法についてご紹介します。

IgbColumn で設定する方法

IgbGrid の IgbColumn 要素のTitleプロパティを使用して、ヘッダーツールチップの内容を設定できます。
これにより、ヘッダー “氏名” にマウスカーソルを置いたときに表示されるツールチップの内容が更新されます。

<IgbColumn Header="氏名" 
           Title="Title プロパティよりツールチップの内容を変更します" 
           ....>
</IgbColumn>

BodyTemplate を使用する方法

同様に、HeaderTemplateのtitle属性を使用して、ヘッダーツールチップの内容をカスタマイズすることもできます。
これにより、ヘッダー “年齢” にマウスカーソルを置いたときに表示されるツールチップの内容が更新されます。

<IgbColumn ....>
  <HeaderTemplate>
      <span title="HeaderTemplate の title 属性よりツールチップの内容を変更します">
       @context.Column.Header</span>
  </HeaderTemplate>
</IgbColumn>

HeaderTemplateScript を使用する方法

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

igRegisterScript("JobTitleTemplate", (context) => {
    const column = context.column;
    const span = document.createElement("span");
    span.textContent = column._header;
    span.title = `HeaderTemplateScript の title 属性より\nツールチップの内容を変更します`;
    return span;
}, false);

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

<IgbColumn Header="職種" 
           HeaderTemplateScript="JobTitleTemplate"
           ....>
</IgbColumn>

実行結果

上記の変更を適用した後、各ヘッダーにマウスカーソルを置くと、新しいツールチップの内容が表示されます。

関連ドキュメント

• IgbGrid – セル内の文字列を改行する方法 – INFRAGISTICS ナレッジ ベース