[FlexGrid] 自動生成される列の幅

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<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">

  <h2>既定の列幅</h2>
  <div id="flexGrid1"></div>
  <h2>自動生成される列の幅を指定した場合</h2>
  <div id="flexGrid2"></div>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var data = [{ 文字列: '文字列', 数値: 1000, 日付: new Date(), ブール値: false }];

var flexGrid1 = new wijmo.grid.FlexGrid('#flexGrid1', {
  itemsSource: data
});

wijmo.grid.FlexGrid.defaultTypeWidth[wijmo.DataType.String] = 200;
wijmo.grid.FlexGrid.defaultTypeWidth[wijmo.DataType.Number] = 80;
wijmo.grid.FlexGrid.defaultTypeWidth[wijmo.DataType.Date] = 150;
wijmo.grid.FlexGrid.defaultTypeWidth[wijmo.DataType.Boolean] = 80;
var flexGrid2 = new wijmo.grid.FlexGrid('#flexGrid2', {
  itemsSource: data
});