[FlexGrid] Tab／Enterキーの操作

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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/wijmo.input.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.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h3>Tab／Enterキーの操作</h3>
  <p>Tab／Enterキーを押したときの操作方法を変更します。</p>
  <div id="flexGrid"></div>
  <form name="form" class="property-panel">
    <label class="full-width">Tabキーの操作<div id="keyActionTab"></div></label>
    <label class="full-width">Enterキーの操作<div id="keyActionEnter"></div></label>
  </form>

</div>

CSS

#flexGrid {
  height: 300px;
}

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.orders(100)
});
flexGrid.columns[1].width = 200;

new wijmo.input.ComboBox('#keyActionEnter', {
  itemsSource: 'なし,下のセルへ移動,右のセルへ移動,右のセルへ移動して、右端から次の行へ移動'.split(','),
  selectedIndex: 1,
  selectedIndexChanged: function(s, e) {
    flexGrid.keyActionEnter = s.selectedIndex;
  }
});
new wijmo.input.ComboBox('#keyActionTab', {
  itemsSource: '次の要素へフォーカスを移動,下のセルへ移動,右のセルへ移動,右のセルへ移動して、右端から次の行へ移動'.split(','),
  selectedIndexChanged: function(s, e) {
    flexGrid.keyActionTab = s.selectedIndex;
  }
});