FlexGrid test

Cells navigation and dragging rows

HTML

<script src="http://cdn.wijmo.com/5.20173.409/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.409/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.409/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.409/controls/wijmo.grid.filter.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20173.409/styles/wijmo.min.css">

<h1>
    FlexGrid test
</h1>
<h2>Cells navigation and dragging rows</h2>
<p>
Test case
</p>
<ul>
<li>Drag a row (for example drag row 3 to row 4 or 5)</li>
<li>Select a cell below dragged row</li>
<li>Using arrow keys try to go to a cell above dragged row</li>
</ul>

<div id="theSheet"></div>

<p>
PS: re-dragging row3 to its original place everything is working
</p>

CSS

#theSheet
{
  height: 210px;
  /*max-height: 300px;*/
}

JavaScript

onload = function() {

  var data = [];
  for (var i = 0; i < 7; i++) {
    data.push({
      id: i,
      product: Math.random() * 10000 - 5000,
      amount: Math.random() * 10000 - 5000,
      quantity: Math.random() * 10000 - 5000,
      discount: Math.random() * 10000 - 5000
    });
  }


  var grid = new wijmo.grid.FlexGrid('#theSheet', {
    allowDragging: 3,
    itemsSource: data,
    columns: [
      { header: 'ID', binding: 'id', width: 40, isReadOnly: true },
      { header: 'Product', binding: 'product' },
      { header: 'Amount', binding: 'amount', format: 'n2' },
      { header: 'Quantity', binding: 'quantity' },
      { header: 'Discount', binding: 'discount' }
    ]
  });
  
  grid.selectionChanging.addHandler((s,e)=>{
  	if(e.row==-1){
    	e.cancel=true;
    }
  });

}