igGrid テンプレート機能の利用

igGrid のテンプレート機能を利用して、セルに任意の要素を埋め込むことができます。 列の template オプションに埋め込む要素を定義します。

template オプション
https://jp.igniteui.com/help/api/2018.2/ui.iggrid#options:columns.template

次の例では、セルにボタンを埋め込みます。

$("#grid").igGrid({
    ...
    columns: [
        {
            headerText: "",
            key: "Detail",
            width: "100px",
            unbound: true,
            template: "<button onclick='detailButtonClicked(this)'>詳細</button>"
        },
        ...
    ]
});

See the Pen igGrid template by ymita (@ymita) on CodePen.

今回のサンプルでは、detailButtonClicked の引数に行全体のデータを取得しています。列のキーを ${…} で囲むことで、テンプレート内でクリック行の特定列のデータのみを取得することができます。

template: "<button onclick='detailButtonClicked(${ProductID})'>詳細</button>"