Demo - MultiSelect

by Joel Parks

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

  <h1>
    MultiSelect
  </h1>

  <p>
    The MultiSelect control extends the ComboBox and adds 
    checkboxes to each item in the drop-down list.</p>
  <p>
    The control exposes the list of checked items through
    the <b>checkedItems</b> property:</p>    
  <div class="row">
    <div class="col-xs-5">
      <div id="theMultiSelect"></div>
      <label>
        Show "Select All" box
        <input id="selectAll" type="checkbox">
      </label>
    </div>
    <div class="col-xs-7">
      <p>
        <b>Checked Items:</b>
      </p>
      <ul id="checkedItems">
      </ul>
    </div>
  </div>
</div>

CSS

.wj-dropdown {
  margin-bottom: 12pt;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // MultiSelect
	var theMultiSelect = new wijmo.input.MultiSelect('#theMultiSelect', {
  	placeholder: 'Countries',
    headerFormat: '{count:n0} countries',
    displayMemberPath: 'country',
    itemsSource: getData(),
    checkedItemsChanged: function (s, e) {
    	console.log(s.dropDown.childNodes[1].childNodes[0].innerHTML);
    	s.dropDown.childNodes[1].childNodes[0].innerHTML = `<label>Kiwi</label>`;
    	var arr = s.checkedItems,
      	  html = '';
      for (var i = 0; i < arr.length; i++) {
      	html += wijmo.format('<li>{country}</li>', arr[i]);
      }
      document.getElementById('checkedItems').innerHTML = html;
		}
	});
  
  // toggle 'select all' checkbox
  document.getElementById('selectAll').addEventListener('click', function(e) {
  	theMultiSelect.showSelectAllCheckbox = e.target.checked;
  })
  
	// list of country GDP and populations
  // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP
  function getData() {
	  return [
			{ id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 },
			{ id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 },
			{ id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 },
			{ id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 },
			{ id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 },
			{ id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 },
			{ id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 },
			{ id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 },
			{ id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 },
			{ id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 },
			{ id: 11, country: 'Iceland', gdpm: 16718, popk: 333, gdpcap: 50204 },
			{ id: 12, country: 'Sweden', gdpm: 493042, popk: 9851, gdpcap: 50049 },
			{ id: 13, country: 'San Marino', gdpm: 1558, popk: 31, gdpcap: 50258 },
			{...