Selection latest version

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<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/wijmo.grid.selector.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>

<br/>
<br/>
<h3>
Select checkbox in any row (but not first row)
</h3>
<p>
Notice the grid selection data only shows first cell is selected. See console.
</p>
  <div id="theGrid">
  </div>
  
<br/>
<br/>
<br/>

JavaScript

onload = function() {

  var data = [
    { product: 1, price: 45.95, qty: 12},
    { product: 2, price: 65.95, qty: 23},
    { product: 3, price: 52.95, qty: 16},
    { product: 4, price: 83.95, qty: 8},
    { product: undefined, price: undefined, qty: undefined},
  ];

  // create a CollectionView
  var view = new wijmo.collections.CollectionView(data, {
		calculatedFields: {
      CalculatedCol: ($) => ($.qty * 10)
    },
    trackChanges: true,
  });

  // create grid for editing
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: view,
    selectionMode: "CellRange"
  });
  
  theGrid.selectionChanged.addHandler(function (grid, e){
    console.log("e.row: ", e.row, grid.rows[e.row].isSelected);
    console.log(grid.selection);
  });
  
  let selector = new wijmo.grid.selector.Selector(theGrid);  
}