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><input type="checkbox" id="preserveWhiteSpace" checked> 複数の連続する半角スペースをそのまま表示</label><br>
  <div id="flexGrid"></div>
</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
    itemsSource: data,
    columns: [
      { binding: '名前', width: 200 }
    ],
    preserveWhiteSpace: true
  });
  document.getElementById('preserveWhiteSpace').addEventListener('change', function (e) {
    flexGrid.preserveWhiteSpace = e.target.checked;
  });
}

var data = [
  { 名前: '空白 1個' },
  { 名前: '空白  2個' },
  { 名前: '空白   3個' },
  { 名前: '空白    4個' },
];