Demo - Popups

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <h1>
    Wijmo Popups + Grid
  </h1>

  <button id="btnDialog" class="btn btn-primary">
    Open PopUp
  </button>
  <div id="dialog">
    <div class="wj-dialog-header">
      Dialog Header
    </div>
    <div class="wj-dialog-body">
      <div id="theGrid">
        
      </div>
    </div>
    <div class="wj-dialog-footer">
      <button class="btn btn-default wj-hide-ok">OK</button>
      <button class="btn btn-default wj-hide-cancel">Cancel</button>
    </div>
  </div>
</div>

CSS

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {
	function getData(count){
	var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
        for (var i = 0; i < count; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                sales: Math.random() * 10000,
                checked: i % 9 == 0
            });
        }
        return data;
}
  
  var grid= new wijmo.grid.FlexGrid('#theGrid',{
  	itemsSource:getData(5)
  });
  // create dialog and show it when the user clicks the button
  // here there's no owner element, so we do need an event handler
  var dialog = new wijmo.input.Popup('#dialog');
  document.getElementById('btnDialog').addEventListener('click', function(e) {

    // show the dialog (modal window)
    dialog.show(true, function(sender) {

      // handle result when user closes the dialog
      if (dialog.dialogResult == 'wj-hide-ok') {
        alert('The dialog was submitted.');
      } else {
        alert('The dialog was canceled.');
      }
    });
  });
}