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>Tree grids and dragging rows</h2>
<p>
Test cases:
</p>
<ol>
<li>The row dragging stops to work when the tree grid is enabled </li>
<li>Enabling the tree grid will reorder the rows and double the columns</li>
</ol>

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

<button id="enableTree">Toggle Tree grids Function</button>

CSS

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

JavaScript

onload = function() {

var enableTree = document.getElementById("enableTree");
  enableTree.onclick = function () {
    if (grid.childItemsPath){
      grid.childItemsPath = null;
      }
    else {
      grid.childItemsPath = 'children';
      }
  };

  var data = [];
  for (var i = 0; i < 7; i++) {
    data.push(createRow(i,0));
  }
  
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: children
  }
}

  var grid = new wijmo.grid.FlexGrid('#theSheet', {
    allowDragging: 3,
    itemsSource: data,
    autoGenerateColumns:false,
    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.collapseGroupsToLevel(0);
  
  grid.selectionChanging.addHandler((s,e)=>{
  	if(e.row==-1){
    	e.cancel=true;
    }
  });
  
}