[MultiRow] 新しい行を先頭に表示

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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.multirow.min.js"></script>
<div class="container">

  <h1>新しい行を先頭に表示</h1>
  <p>MultiRow.newRowAtTopプロパティをtrueに設定して、MultiRowでも新しい行を先頭に表示できるようになりました。</p>
  <input type="checkbox" id="isNewRowAtTop" onchange="update()">
  <label for="isNewRowAtTop">新しい行を先頭に表示</label>
  <div id="multiRow"></div>

</div>

JavaScript

var multiRow = new wijmo.grid.multirow.MultiRow('#multiRow', {
  itemsSource: sample.ordersDetail(),
  allowAddNew: true,
  layoutDefinition: [
    {
      cells: [
        { binding: 'No', header: 'No', width: 80 }
      ]
    },
    {
      colspan: 2, cells: [
        { binding: '商品名', header: '商品名', colspan: 2 },
        { binding: '分類名', header: '分類名' },
        { binding: '顧客名', header: '顧客名' }
      ]
    },
    {
      cells: [
        { binding: '数量', header: '数量' },
        { binding: '金額', header: '金額', format: 'c' }
      ]
    },
    {
      cells: [
        { binding: '受注日', header: '受注日' },
        { binding: '値引', header: '値引' }
      ]
    }
  ]
});
function update() {
  multiRow.newRowAtTop = document.getElementById('isNewRowAtTop').checked;
}