Wijmo Popup

containing wijmo elements

by Joel Parks

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>
<div class="container">

<h2>
 Wijmo Popup containing a ListBox control
</h2>
<p>
Notice that selection persists when the popup appears/disappears
</p>

<button id="button1" class="btn btn-primary">Button 1</button>
<button id="button2" class="btn btn-primary">Button 2</button>

<div id="popup">
    <div class="wj-dialog-header">
      Showing Popup
    </div>
    <div class="wj-dialog-body" tabindex="-1">
      <div id="listbox" style="height:200px"></div>
    </div>
    <div class="wj-dialog-footer">
      <button id="no" class="btn btn-primary wj-hide-ok">Yes</button>
      <button class="btn btn-default wj-hide">No</button>  
    </div>
</div>

</div>

JavaScript

// create popup
var popup = new wijmo.input.Popup('#popup', {
	isResizable: true,
});
// show popup
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('button2').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;
      }
    });
  });
  

  
// create ListBox
var lb = new wijmo.input.ListBox('#listbox', {
    itemsSource: getCountries()
});

document.getElementById('popup').addEventListener('resize', function() {
		console.log('Hello');
});


// list of countries to select from
function getCountries() {
    return [
            'Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla',
            'Antigua', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan',
            'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize',
            'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bonaire', 'Bosnia', 'Botswana', 'Brazil',
            'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada',
            'Canary Islands', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad',
            'Channel Islands', 'Chile', 'China', 'Christmas Island', 'Cocos Island', 'Colombia',
            'Comoros', 'Congo', 'Cook Islands', 'Costa Rica', "Cote D'Ivoire", 'Croatia',
            'Cuba', 'Curacao', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica',
            'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador',...