Demo - International Sort

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

  <h1>
    International Sort
  </h1>
  <p>
    The CollectionView class uses the
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator">Intl.Collator</a>
		class to compare strings for sorting. This class handles lower/upper
		case as well as diacritics (accents) often present in international
    applications.
  </p>
	<p>
		By default, the CollectionView class uses the default <b>Intl.Collator</b>
		for comparing strings, and JavaScript to compare all other objects.
		You can override this by setting the CollectionView's
		<a href="https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.CollectionView.Class.html#sortComparer">sortComparer</a>
		property to a function that compares two values using whatever logic
		you want, or by setting the 
		<a></a>
	
	</p>
	sortComparer
  <p>
    For example, here's how the CollectionView and JavaScript sort a
		list of strings with diacritics, numbers, and upper/lower case 
		strings::</p>
  <button id="asc" class="btn">
			Sort Ascending
	</button>
  <button id="desc" class="btn">
			Sort Descending
	</button>
	<div class="row">
		<div class="col-xs-6">
			<h4>
				JavaScript array.sort
			</h4>
			<ol id="ol-js">
			</ol>
		</div>
		<div class="col-xs-6">
			<h4>
				CollectionView.sort
			</h4>
			<ol id="ol-cv">
			</ol>
		</div>
	</div>
</div>

JavaScript

onload = function() {

	// show ascending sort
	sort(true);
	
	// handle buttons
  document.getElementById('asc').addEventListener('click', function() {
		sort(true);
	});
  document.getElementById('desc').addEventListener('click', function() {
		sort(false);
	});

	// sort with JavaScript and with CollectionView
  function sort(ascending) {
	
		// sort javascript
		var items = getItems();
		items.sort();
		if (!ascending) {
			items.reverse();
		}
		
		// show javascript sort
	  var ol = document.getElementById('ol-js');
		ol.innerHTML = '';
		items.forEach(function(item) {
			var li = document.createElement('li');
			li.textContent = item;
			ol.appendChild(li);
		});
		
		// sort CollectionView
		items = [];
		getItems().forEach(function(item) {
			items.push({ value: item});
		})
		var cv = new wijmo.collections.CollectionView(items);
		cv.sortDescriptions.push(new wijmo.collections.SortDescription('value', ascending))
		
		// show CollectionView sort
	  ol = document.getElementById('ol-cv');
		ol.innerHTML = '';
		cv.items.forEach(function(item) {
			var li = document.createElement('li');
			li.textContent = item.value;
			ol.appendChild(li);
		});
  }

  function getItems() {
    return [
      'aaron',
      'Aaron',
      'Ação',
      'Acao',
      'Haagen',
      'Häagen',
      'Hilton',
      'bill',
      'Bill',
      'Adieu',
      'a',
      'A',
      'b',
      'B',
    ];
  }
}