FlexGrid - Delete Row Confirm

Displays a popup just before a row is deleted to confirm the action

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>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>FlexGrid</h1>
  <p>
    This FlexGrid demonstrates how to delete a row and use a popup to confirm the action
  </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 id="popup" style="display:none">
        <div class="wj-dialog-header">
          Deleting Row
        </div>
        <div class="wj-dialog-body" tabindex="-1">
          Do you really want to delete this row?
        </div>
        <div class="wj-dialog-footer">
          <button class="btn btn-primary wj-hide-ok">Yes</button>
          <button class="btn btn-default wj-hide">No</button>
        </div>
      </div>
    </div>

  </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 popup = new wijmo.input.Popup("#popup");
  var cv = new wijmo.collections.CollectionView(data);
  var flexGrid = new wijmo.grid.FlexGrid("#flexGrid", {
    itemsSource: cv,
    allowDelete: true,
    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'
      },
    ]
  });


  flexGrid.deletingRow.addHandler(function(s, e) {
    e.cancel = true;

    //show pop up to confirm
    popup.show(true, function(sender) {
      var view = flexGrid.collectionView;
      // delete the row
      if (sender.dialogResult == 'wj-hide-ok') {
        view.remove(view.currentItem);
      } else {
        e.cancel = true;
      }
    });

  });

}