FlexGrid - Delete Row

Delete row and display confirmation pop up just before a row is deleted

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">
  
  <h1>FlexGrid</h1>
  <p>
  This FlexGrid demonstrates 2 ways to delete a row in the FlexGrid
  </p>
  <ul>
    <li>Use the keyboard Backspace | Delete buttons</li>
    <li>Create delete buttons in each row and remove items from CollectionView upon click</li>
  </ul>
  <p>
    The FlexGrid has a deletingRow and deletedRow event that gets triggered each time a row is deleted using the keyboard. If a programmer decides to use buttons instead, the events will not trigger. 
  </p>
  <div id="flexGrid"></div>
  
  <!-- template for delete button -->
  <div id="tplBtnViewMode" style="display:none">
    <button id="btnDelete" class="btn btn-default btn-sm">
      <span class="glyphicon glyphicon-remove"></span> Delete
    </button>
  <div>
  
  <!-- popup -->
  
  
</div>

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece,China,Spain,Sweden,Norway,Denmark,Finland'.split(','),
    data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      id: i,
      country: countries[i],
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }
	var cv = new wijmo.collections.CollectionView(data);
  var flexGrid = new wijmo.grid.FlexGrid("#flexGrid", {
  	itemsSource: cv,
    allowDelete: false,
    autoSizeMode: 'Cells',
    selectionMode: 'ListBox',
    columns: [
      {binding: 'id', header: 'Id', isReadOnly: true},
      {binding: 'country', header: 'Country'},
      {binding: 'downloads', header: 'Downloads'},
      {binding: 'sales', header: 'Sales', format: 'n2'},
      {binding: 'expenses', header: 'Expenses', format: 'n2'},
      {binding: 'buttons', header: 'Delete'},
    ]
  });

  flexGrid.deletingRow.addHandler(function (s, e) {
  	console.log('deleting row');
  
  });
  flexGrid.deletedRow.addHandler(function (s, e) {
  	console.log('deleted row');
  
  });
  flexGrid.formatItem.addHandler(function(s, e) {
    if (e.panel == s.cells) {
      var col = s.columns[e.col],
      		item = s.rows[e.row].dataItem;

      if (col.binding == 'buttons') {
        e.cell.innerHTML = document.getElementById('tplBtnViewMode').innerHTML;
        e.cell.dataItem = item;
      }
      
    }
  });
  
  // handle button clicks
  flexGrid.addEventListener(flexGrid.hostElement, 'click', function(e) {
    if (e.target.tagName == 'BUTTON') {
      if (e.target.id == 'btnDelete'){

        if (confirm("Desea continuar?")) {
           // get button's data item
          var item = wijmo.closest(e.target, '.wj-cell').dataItem;

          // show pop up and determine 
          flexGrid.collectionView.remove(item);
        }
      }
    }
  });
  
  flexGrid.autoSizeRows();
}