FlexGrid test

Cells navigation and dragging rows

by Carlo

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>Click on a cell in row 1</li>
<li>Using arrow keys go all the way down</li>
<li>Using arrow keys go right or left</li>
<li>Using arrow keys go all the way up</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 < 4; i++) {
    data.push(crea);
  }
  
function createRow(idx, level) {
  var children = [];
  if (level < 1)
  {
    var nChildren = Math.floor(Math.random() * 3);
    for (c = 0; c < nChildren; c++) {
      children.push(createRow( idx*100 + c,level + 1));
    }
  }
  return {
    id: idx,
    product: Math.random() * 10000 - 5000,
    amount: Math.random() * 10000 - 5000,
    quantity: Math.random() * 10000 - 5000,
    discount: Math.random() * 10000 - 5000,
    children
  }
}

  var grid = new wijmo.grid.FlexGrid('#theSheet', {
    allowDragging: 3,
    itemsSource: data,
    childItemsPath: 'children',
    columns: [
      { header: 'ID', binding: 'id', width: 100, 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;
    }
  });

}