Demo - FlexGrid Sort Groups by Aggregates

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

  <h1>
    FlexGrid Sort Groups by Aggregates
  </h1>
  <p>
    This example uses a <b>CollectionView</b> with a custom
    <b>sortConverter</b>.
  </p>
  <p>
    The converter takes into account the aggregate value for the item
    being sorted, so when you sort by "Sales" countries with the most
    sales will appear before others.
  </p>
  <div id="theGrid">
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}

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

JavaScript

onload = function() {

  // default grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [
    	{ binding: 'id', header: 'ID' },
      { binding: 'country', header: 'Country' },
      { binding: 'downloads', header: 'Downloads', aggregate: 'Sum' },
      { binding: 'sales', aggregate: 'Sum' },
      { binding: 'expenses', aggregate: 'Sum' },
    ],
    itemsSource: new wijmo.collections.CollectionView(getData(), {
      groupDescriptions: ['country'],
      sortConverter: (sd, item, value) => {

        // see if the column being sorted on as an aggregate
        let col = theGrid.columns.getColumn(sd.property);
        if (col && col.aggregate) {

          // look for the group that contains this value
          let view = theGrid.collectionView;
          for (let i = 0; i < view.groups.length; i++) {
            let group = view.groups[i];
            if (group.items.indexOf(item) > -1) {

              // set the sorting value the the group aggregate * 10M + the item value
              value = group.getAggregate(col.aggregate, col.binding) * 10e6 + value;
              break;
            }
          }
        }
        return value;
      }
    })
  });
  
  // start collapsed
  theGrid.collapseGroupsToLevel(0);

  // create some random data
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
    for (var i = 0; i < 200; i++) {
      data.push({
        id: i,
        country: countries[i % countries.length],
        active: i % 5 != 0,
        downloads: Math.round(Math.random() * 20000),
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
      });
    }
    return data;
  }
}