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>
<div class="container-fluid">
  <label>ピンの固定方法
    <select id="allowPinning">
      <option value="None">ピンを非表示</option>
      <option value="SingleColumn">クリックしたピンの列を固定</option>
      <option value="ColumnRange" selected>クリックしたピンの列から左を固定</option>
      <option value="Both">両方の方法で列を固定</option>
    </select>
  </label>
  <div id="flexGrid"></div>
</div>

CSS

body {
  margin: 50px 0;
}
.wj-cell.wj-frozen {
  background-color: lavender;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
    itemsSource: getData(5),
    allowPinning: wijmo.grid.AllowPinning.ColumnRange
  });
  document.getElementById('allowPinning').addEventListener('change', function (e) {
    flexGrid.allowPinning = e.target.value;
  });
}

var categoryNames = ['飲料', '調味料', '菓子類', '乳製品', '穀類、シリアル', '肉類', '加工食品', '魚介類'];
var productNames = [
  ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター', 'コーヒーミルク', 'ピリピリビール', 'オタル白ラベル', 'バードワイン'],
  ['ホワイトソルト', 'ブラックペッパー', 'ピュアシュガー', 'うまい素', 'ピュアデミグラスソース', 'だしかつお', 'だしこんぶ', 'ピリカラタバスコ', 'のり山椒', '特製和風醤油'],
  ['バニラクリームアイス', 'チョコクリームアイス', '紅茶バー', 'じゃがチップス', 'アメリカンクラッカー', 'バナナキャンディー', 'メロンミルクキャンディー', '小倉あんぱん', 'インドカレーパン', 'チーズあんぱん'],
  ['ロッキーチーズ', 'パルメザンチーズ', 'フレッシュバター', 'ライフマーガリン', 'ローカロリー牛乳', '牛乳マイルド', 'ストロベリーヨーグルト', 'ブルーベリーヨーグルト', 'ラズベリーヨーグルト', 'ココナッツミルク'],
  ['モーニングブレッド', 'バタートースト', 'バケットフランス', '極上パスタ', '極上マカロニ', '伝統スパゲッティ', 'ヘルシークラッカー', 'コーンフレークプレーン', 'コーンフレークチョコ', 'コーンフレークシュガー'],
  ['アメリカンポーク', 'うす味ウインナー', 'ベターローストハム', 'ベタープレスハム', 'ベター生ハム', '特製サラミ', '和風ハンバーグレトルト', '照焼きミートボール', 'ミックスハム', 'ミートバー'],
  ['もめんどうふ特上', 'きぬごしどうふ特上', '冷凍ミックスベジタブル', '冷凍クリームコロッケ', '冷凍コーンクリームコロッケ', '冷凍ポテトコロッケ', '冷凍枝豆', '冷凍やきおにぎり', '乾燥バナナ', '乾燥アップル'],
  ['特選味のり', '北海道昆布', 'やきいかするめくん', '食卓わかめ', 'ふりかけかつお風味', 'ふりかけ鮭風味', '大陸サーモン', '特選にぼし', '本がつお特上', 'ころもはんぺん']
];
var customerNames = ['小料理なんごく' ,'割烹ふじい' ,'海鮮料理くじら' ,'居酒屋ななべえ' ,'酒蔵でん'];
function random(max, min) {
  if (!min) min = 0;
  return Math.floor(Math.random() * (max - min)) + min;
}
function randomDate() {
  var date = new Date((new Date()).getFullYear() - 5, 3, 1);
  return wijmo.DateTime.addDays(date, random(365 * 5));
}
function getData(length) {
  var orders = [];
  for (var i = 0; i < length; i++) {
    var categoryId = random(categoryNames.length);
    orders.push({
      No: i,
      分類名: categoryNames[categoryId],
      商品名:...