Wijmo Popup

containing wijmo elements

by yohnan

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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">

<h2>
 Wijmo Popup with grid
</h2>

<button id="button1" class="btn btn-primary">Show popup</button>

<div id="popup">
    <div class="wj-dialog-header">Popup</div>
    <div class="wj-dialog-body" tabindex="-1">
      <div id="theGrid"></div>
      <div id="info"></div>
    </div>
    <div class="wj-dialog-footer">
      <button id='removeBtn' class="btn btn-default">Remove row 2</button>
      <button class="btn btn-primary wj-hide-ok">OK</button>
    </div>
</div>

</div>

JavaScript

let data = [{id: 1, name: "Fred Flinstone",  value: 100},
 						{id: 2, name: "Wilma Flinstone", value: 200},
 						{id: 3, name: "Barney Rubble",   value: 300},
 						{id: 4, name: "Betty Rubble",    value: 400},
 						{id: 5, name: "Bamm Bamm",       value: 500},
 						{id: 6, name: "Pebbles",         value: 600},
 						{id: 7, name: "Mr Slate",        value: 700},
  ];

// create popup
var popup = new wijmo.input.Popup('#popup');
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    allowDragging: "None",
    allowSorting: false,
    showSort: false,
    stickyHeaders: false,
    autoGenerateColumns: false,
    itemsSource: data,
    columns: [
      { header: 'ID', binding: 'id', width: 50, isReadOnly: true },
      { header: 'Name', binding: 'name', width: 200 },
      { header: "Value", binding: 'value', width: 50 }
    ],
  });
document.getElementById('info').innerHTML = 'Initially there are ' + data.length + ' rows in data.';
// show popup on button click
document.getElementById('button1').addEventListener('click', function() {
    
    popup.show(true, function(sender) {
      switch (sender.dialogResult) {
        case 'wj-hide-ok':
        	console.log(sender);
          break;
        case 'wj-hide-cancel':
        	//alert('Cancel');
          break;
      }
    });
  });
document.getElementById('removeBtn').addEventListener('click', function() {
	theGrid.itemsSource.splice(1,1);
  theGrid.refresh(true);		// why does the grid not update?
	document.getElementById('info').innerHTML = 'Now there are ' + data.length + ' rows in data.';
});