Demo - ComboBox

by Troy Taylor

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.wijmo.com/jquery.wijmo-pro.all.3.20182.136.min.css">
<script src="https://cdn.wijmo.com/jquery.wijmo-open.all.3.20182.136.min.js"></script>
<script src="https://cdn.wijmo.com/jquery.wijmo-pro.all.3.20182.136.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<link rel="stylesheet" href="https://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<div class="container">
  
  <h3>
    ComboBox not displaying menu dropdown properly in Dialog
  </h3>
    
    <button id="dialogButton" type="button">
    Open Dialog
    </button>
    <dialog id="comboDialog">
        <div>
          Input controls in a dialog
        </div>
        <div id="theComboBox"></div>
        
      <button type="button" id="cancel" onclick="closeDialog()">
        Cancel
      </button>
      
    </dialog>
    
    <button id="wjdialogButton" type="button" onclick="openWjDialog()">
    Open Wijmo Dialog
    </button>
    
    <!-- <dialog id="wjDialog"> -->
    <div id="wjDialog" title="wijmo 3 dialog">
        <div>
          Input controls in a Wijmo 3 dialog
        </div>
        <div id="theComboBox"></div>
        <div id="theAutoComplete"></div>
        <div id="theDateTime"></div>
        <div id="theDate"></div>
        
      <button type="button" id="cancel"...

CSS

label {
  width: 150px;
  text-align: right;
}
label + div {
  display: inline-block;
  max-width: 160px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

body {
  margin-bottom: 36pt;
}

JavaScript

require(["wijmo.wijdialog"], function () {

$(document).ready(function() {
	var dialog, wjDialog;
  
  $('#wjDialog').wijdialog({
  	autoOpen: true,
    captionButtons: {
    	refresh: { visible: false }
    }
  });

  function openWjDialog() {
    console.log(wjDialog);
    wjDialog.open();
  }
  function closeWjDialog(){
    console.log(wjDialog);
    wjDialog.close();
  }
  function openDialog() {
    dialog.showModal();
  }
  function closeDialog(){
    dialog.close();
  }

	dialog = document.getElementById("comboDialog");
	wjDialog = document.getElementById("wjDialog");
  
  dialogButton = document.getElementById("dialogButton").
  dialogButton.on('click', function(){
  	console.log('dialog button clicked');
    dialog.showModal();
  });
	// data used in the combo
	var theData = [
  	{ name: 'Zero', value: 0 },
  	{ name: 'Low', value: 10 },
  	{ name: 'Medium', value: 50 },
  	{ name: 'High', value: 100 },
  	{ name: 'Maximum', value: 150 },
  ];

  
  // create the combo
  var theComboBox = new wijmo.input.ComboBox('#theComboBox', {
    displayMemberPath: 'name',
    selectedValuePath: 'value',
  	itemsSource: theData
  });
  var theAutoComplete = new wijmo.input.ComboBox('#theAutoComplete', {
    displayMemberPath: 'name',
    selectedValuePath: 'value',
  	itemsSource: theData
  });
  var dateTime = new wijmo.input.InputDateTime('#theDateTime');
  var date = new wijmo.input.InputDate('#theDate');

});

});