Demo - On-Demand Sorting

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.grid.min.js"></script>
<div class="container">

  <h1>
    On-Demand Sorting
  </h1>
  <p>
    The FlexGrid relies on the CollectionView class to perform
    data operations including sorting, filtering, grouping, paging,
    change tracking, etc.</p>
  <p>
    The CollectionView refreshes and re-sorts the data after any
    edits. This sample shows how you can override that behavior
    and sort the grid only when the user clicks a column header.
    Editing will not cause sort updates:</p>
  <div id="theGrid">
  </div>
</div>

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','),
    data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      id: i,
      country: countries[i],
      active: i % 5 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

	// create the grid with on-demand sorting
  var view;
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	itemsSourceChanged: function(s, e) {
    	view = s.collectionView;
    	view.canSort = false; // prevent sorting
    },
    sortedColumn: function(s, e) {
    	view.canSort = false; // prevent sorting
			view.sourceCollection = view.items; // copy sorted values
    },
    showAlternatingRows: false,
  	itemsSource: data
	});
  
  // allow sorting by mouse click
  theGrid.hostElement.addEventListener('mousedown', function(e) {
  	if (theGrid.hitTest(e).panel == theGrid.columnHeaders) {
	  	view.canSort = true;
    }
  }, true);
}