igGrid テンプレートセルにデータソースの値を埋め込む

igGrid のテンプレート機能では、セル内に任意のコントロールを配置することができます。また、テンプレート内にデータソースのバインドデータを埋め込むこともできます。バインドデータの埋め込みは、テンプレート内に ${ バインドデータ } の書式で記述することができます。

下記例では、テンプレート内のボタンのテキストに、製品 ID をバインドしています。

$("#grid").igGrid({
  ...
  columns: [
    {
      headerText: "製品 ID",
      key: "Id",
      dataType: "number",
      width: "140px",
      template:
        "<button onclick='buttonClicked(this)'>詳細 - ${Id}</button>",
    },
    ...
  ],
  ...
});

実行結果

バインドした製品 ID がボタンのテキストに含まれていることが分かります。

リファレンス

• 基本的な列テンプレートの作成 (igGrid)
  • https://jp.igniteui.com/help/creating-a-basic-column-template-in-the-iggrid