Wijmo FlexGrid カスタムセルの生成

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.cellmaker.min.js"></script>
<div class="container-fluid">
  <div id="flexGrid1"></div>
  <div id="flexGrid2"></div>
</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var flexGrid1 = new wijmo.grid.FlexGrid('#flexGrid1', {
    itemsSource: [
      {
        name: 'Wijmo',
        url: 'https://www.grapecity.co.jp/developer/wijmo',
        image: 'https://demo.grapecity.com/wijmo/demos/resource/logo.png',
        rating: 4
      },
      {
        name: 'SpreadJS',
        url: 'https://www.grapecity.co.jp/developer/spreadjs',
        image: 'https://demo.grapecity.com/spreadjs/demos/spread/source/SPJS.png',
        rating: 4
      },
      {
        name: 'InputManJS',
        url: 'https://www.grapecity.co.jp/developer/inputmanjs',
        image: 'https://demo.grapecity.com/inputmanjs/demos/resource/logo.png',
        rating: 4
      },
      {
        name: 'ActiveReportsJS',
        url: 'https://www.grapecity.co.jp/developer/activereportsjs',
        image: 'https://demo.grapecity.com/activereportsjs/demos/resource/ARJS-Logo-01.svg',
        rating: 4
      },
    ],
    columns: [
      {
        header: 'ボタン',
        width: 150,
        cellTemplate: wijmo.grid.cellmaker.CellMaker.makeButton({
          text: '${item.name}',
          click: function (e, ctx) {
            alert(ctx.item.name + 'のボタンがクリックされました');
          }
        })
      },
      {
        header: 'リンク',
        width: 150,
        cellTemplate: wijmo.grid.cellmaker.CellMaker.makeLink({
          text: '${item.name}',
          href: '${item.url}',
          attributes: {
            target: '_blank'
          }
        })
      },
      {
        header: 'カスタムリンク',
        width: 150,
        cellTemplate: wijmo.grid.cellmaker.CellMaker.makeLink({
          text: '${item.name}',
          click: function (e, ctx) {
            alert(ctx.item.name + 'のリンクがクリックされました');
          }
        })
      },
      {
        binding: 'image',
        header: '画像',
        width: 180,
        cellTemplate: wijmo.grid.cellmaker.CellMaker.makeImage({
          click: function...