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>Tree grids and dragging rows</h2>

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

<button id="enableTree">Collapse-Hide all</button>
<button id="addRow">Add new row</button>
<button id="addEmptyRow">Add empty row</button>

CSS

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

.highlighted
{
  font-weight: bold;
}

.italic
{
  font-style: italic;
}

JavaScript

onload = function() {

  var collapse = true;
  
//Create random data
  var nRows = 6;
  var treeLevel = 3;
  var dataGrid = [];
  for (var i = 1; i < nRows; i++) {
    createRow(i, 0, 0, dataGrid);
  }

  function createRow(idx, level, father, data) {
    var nChildren = (level < treeLevel) ? Math.floor(Math.random() * 4) : 0;
    var row = {
        id: idx,
        product: Math.random() * 10000 - 5000,
        amount: Math.random() * 10000 - 5000,
        quantity: Math.random() * 10000 - 5000,
        discount: "Math.random() * 10000 - 5000",
        nChildren: nChildren,
        father: father,
        level: level
      }
      data.push(row);
      if (level < treeLevel && nChildren > 0) {
          for (c = 0; c < nChildren; c++) {
            createRow( idx*100 + c,level + 1, idx, data);
        }
      }
    }

// Create and initialize Flexgrid
  var grid = new wijmo.grid.FlexGrid('#theSheet', {
    allowDragging: 3,
    itemsSource: dataGrid,
    autoGenerateColumns: false,
    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', wordWrap: true },
      { header: 'Children', binding: 'nChildren' },
      { header: 'Father', binding: 'father' },
      { header: 'Level', binding: 'level' }      
    ]
  });
  
// Styling the grid
  function restyle(startPos, visible) {
    for (var i = startPos; i < grid.rows.length; i++) {
      if (grid.rows[i].dataItem.nChildren>0) {
        grid.rows[i].cssClass = 'highlighted';
      }
      if (grid.rows[i].dataItem.level>0) {
        grid.rows[i].cssClass = 'italic';
        grid.rows[i].visible = visible;
      }
    }
  }
  
  restyle(0, false);
  
// Collapse-expand group
  grid.hostElement.addEventListener('dblclick', function (e) {
    var ht = grid.hitTest(e.pageX,...