Demo - ListBox/ComboBox Grouping

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.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">

  <h2>
    ListBox/ComboBox Grouping
  </h2>
  <p>
    Use the <b>showGroups</b> property to add group headers
		to <b>ListBox</b> and <b>ComboBox</b> controls.
  </p>
  <p>
    Group header items are added if the <b>showGroups</b>
		property is set to true and the <b>itemsSource</b> collection
		has grouping enabled.
  </p>
  <p>
    Header items are presentational only. They cannot be selected
		with the mouse or keyboard and are not bound to any data items.
  </p>

  <label>
		Show Groups
    <input id="showGroups" type="checkbox" checked>
	</label>
  <label>
  	Format Group Headers
    <input id="formatItem" type="checkbox" checked>
	</label>
  <label>
  	Show Checkboxes
    <input id="checkBoxes" type="checkbox">
	</label>

	<div class="row">
		<div class="col-xs-6">
      <h4>
        ComboBox
      </h4>
		  <div id="theComboBox"></div>
		</div>
		<div class="col-xs-6">
      <h4>
        ListBox
      </h4>
		  <div id="theListBox"></div>
		</div>
	</div>
</div>

CSS

.wj-listbox {
  height: 200px;
  display: block;
}
.wj-listbox .wj-listbox-item {
  line-height: 2em;
}
.wj-listbox .wj-listbox-item.wj-header {
  opacity: 1;
  position: sticky;
  top: 0;
}

.container label {
	margin: 0 24px;
}

body {
  margin-bottom: 40px;
}

JavaScript

onload = function() {

	// get grouped CollectionView
  var data = getData();

  // toggle showGroups
  var showGroups = true;
  document.getElementById('showGroups').addEventListener('click', function(e) {
  	showGroups = e.target.checked;
    theComboBox.showGroups = showGroups;
    theListBox.showGroups = showGroups;
	});

  // toggle formatItem
  var formatItem = true;
  document.getElementById('formatItem').addEventListener('click', function(e) {
  	formatItem = e.target.checked;
		data.refresh();
	});

	// toggle checkboxes
	var checkBoxes = false;
	document.getElementById('checkBoxes').addEventListener('click', function(e) {
		checkBoxes = e.target.checked;
    theListBox.checkedMemberPath = e.target.checked ? 'checked' : '';
	});

	// show in ComboBox
	var theComboBox = new wijmo.input.ComboBox('#theComboBox', {
		showGroups: true,
		formatItem: formatGroupHeader,
    displayMemberPath: 'city',
    itemsSource: data,
    selectedIndexChanged: function(s, e) {
    	console.log(
				'selectedIndexChanged',
        s.selectedIndex,
        s.selectedItem.city);
    }
  });

  // show in ListBox
  var theListBox = new wijmo.input.ListBox('#theListBox', {
  	showGroups: true,
    formatItem: formatGroupHeader,
    displayMemberPath: 'city',
    itemsSource: data,
    selectedIndexChanged: function(s, e) {
    	console.log(
      	'selectedIndexChanged',
        s.selectedIndex,
        s.selectedItem.city);
    },
    itemChecked: function(s, e) {
    	console.log(
      	'itemChecked',
        s.selectedIndex,
        s.selectedItem.city,
        s.selectedItem[s.checkedMemberPath]);
      }
    });

	// show a flag in the group headers
  function formatGroupHeader(s, e) {
  	if (formatItem) {
    	if (e.index < 0 && e.data instanceof wijmo.collections.CollectionViewGroup) {
      	var group = e.data,
        		code = getCountryCode(group.name);
				if (code) {
        	var fmt = '<span class="flag-icon flag-icon-{code}"></span> {country}';
         ...