Demo - Keep Groups Sorted

by Manish Gupta

HTML

<link rel="stylesheet" href="http://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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Keep Groups Sorted
  </h1>
	<p>
		When you group data in a CollectionView, the order of the groups
		is determined by the order of the items in the default view.
		Because of this, sorting the data affects the group order.
	</p>
	<p>
		This sample shows how you can  keep the group order constant
		when you sort the grid by clicking a column header.
		It handles the grid's <b>sortingColumn</b> event to populate
		the <b>sortDescriptions</b> collection and sort by group first
		and then by the column that was clicked.
	</p>
	<label for="theCombo">
		Group By:
	</label>
  <div id="theCombo"></div>
  <div id="theGrid"></div>

</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin: 6px 0;
}

.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    products = 'Cars,Phones,Bikes,Computers,Cups'.split(','),
    colors = 'Red,Green,Blue,Yellow'.split(','),
    data = [];
  for (var i = 0; i < 20; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      product: products[i % products.length],
      color: colors[i % colors.length],
      active: i % 3 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data,

    // sort by group first, then by selected column
    sortingColumn: function(s, e) {
      var view = s.collectionView,
        col = s.columns[e.col],
        asc = col.currentSort != '+',
        sorts = view.sortDescriptions,
        sd = new wijmo.collections.SortDescription(col.binding, asc);
      view.deferUpdate(function() {
			  view.stableSort = true;
        sorts.clear();
        view.groupDescriptions.forEach(function(gd) {
          var gsd = new wijmo.collections.SortDescription(gd.propertyName, true);
          sorts.push(gsd);
        });
        sorts.push(sd);
      });
      e.cancel = true;
    }
  });
  var cv=theGrid.collectionView;
  cv.groupDescriptions.collectionChanged.addHandler(function(s,e){
  var sorts=cv.sortDescriptions;
  	cv.deferUpdate(function() {
			  cv.stableSort = true;
        sorts.clear();
        cv.groupDescriptions.forEach(function(gd) {
          var gsd = new wijmo.collections.SortDescription(gd.propertyName, true);
          sorts.push(gsd);
        });
       
      });
      cv.moveCurrentToPosition(0);
    
  })

  // select the type of grouping you want
  new wijmo.input.ComboBox('#theCombo', {
    selectedIndexChanged: function(s, e) {
      var view = theGrid.collectionView;
      view.groupDescriptions.clear();
 ...