<wjc-flex-grid id="grid">
  <wjc-flex-grid-column binding="No"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="商品名" width="200"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="受注日"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="金額" format="c"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="値引"></wjc-flex-grid-column>
</wjc-flex-grid>
//----------------------------------
// 連結データ
//----------------------------------
var data = [
  {
    No: 0,
    商品名: "うまい素",
    受注日: "2016/12/28",
    金額: 11040,
    値引: true
  },
  {
    No: 1,
    商品名: "チョコクリームアイス",
    受注日: "2015/12/17",
    金額: 15600,
    値引: "false"
  },
  {
    No: 2,
    商品名: "ピュアシュガー",
    受注日: "2014/01/17",
    金額: 2800,
    値引: "false"
  },
  {
    No: 3,
    商品名: "果汁100%レモン",
    受注日: "2013/10/22",
    金額: 12240,
    値引: "true"
  },
  {
    No: 4,
    商品名: "パルメザンチーズ",
    受注日: "2014/08/22",
    金額: 10500,
    値引: "false"
  }
];

window.onload = function() {
  // ウェブコンポーネント要素を取得します
  var grid = document.getElementById("grid");

  // 連結データを設定します
  grid.itemsSource = data;

  // 選択セルが変更された場合のイベント設定を行います
  grid.addEventListener("selection-changed", function(e) {
    document.getElementById("log").innerText = wijmo.format(
      "({row}, {col})",
      e.detail
    );
  });
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.