clone of slickGrid example-grouping.html

adaption to issue #926 https://github.com/mleibman/SlickGrid/issues/926

HTML

<script src="https://rawgit.com/icoxfog417/SlickGrid/issue841/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgit.com/icoxfog417/SlickGrid/issue841/slick.core.js"></script>
<script src="https://rawgit.com/icoxfog417/SlickGrid/issue841/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgit.com/icoxfog417/SlickGrid/issue841/slick.grid.css">
<link rel="stylesheet" href="https://rawgit.com/icoxfog417/SlickGrid/issue841/examples/examples.css">
<script src="http://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<script src="https://rawgit.com/icoxfog417/SlickGrid/issue841/slick.groupitemmetadataprovider.js"></script>
<body>
    <div id="myGrid"></div>
</body>

JavaScript

var ReportData = {
	"cols":{
		"date":"Date",
		"status":"Status",
		"dataField":"Data field"
	},
	"data":[
		{"id":0,"date":"First","status":"Accepted","dataField":"1000"},
		{"id":1,"date":"Second","status":"Accepted","dataField":"2000"},
		{"id":2,"date":"Third","status":"Accepted","dataField":"3000"},
		{"id":3,"date":"Fourth","status":"Accepted","dataField":"4000"},
		{"id":4,"date":"Fifth","status":"Accepted","dataField":"5000"},
		{"id":5,"date":"Sixth","status":"Canceled","dataField":"6000"},
		{"id":6,"date":"Seventh","status":"Canceled","dataField":"7000"},
		{"id":7,"date":"Eight","status":"Canceled","dataField":"8000"},
		{"id":8,"date":"Ninth","status":"Canceled","dataField":"9000"},
		{"id":9,"date":"Tenth","status":"Rejected","dataField":"1000"},
		{"id":10,"date":"Eleventh","status":"Rejected","dataField":"2000"},
		{"id":11,"date":"Twelfth","status":"Rejected","dataField":"3000"}
	]
};

var options = {
  enableCellNavigation: true,
  editable: true,
  autoHeight:true,
  forceFitColumns: true,
};

function groupBy() {
	dataView.setGrouping([{
		getter: "status",
		aggregators: [
			new Slick.Data.Aggregators.Sum("dataField"),
		],
		collapsed: true,
		aggregateCollapsed: true,
		lazyTotalsCalculation: true
	},{
		getter: "date",
		aggregators: [
			new Slick.Data.Aggregators.Sum("dataField"),
		],
		collapsed:true,
		aggregateCollapsed: true,
		lazyTotalsCalculation: true
	},]);
}



function sumTotalsFormatter (totals, columnDef) {
	var rowData = '';

	// Get sum
	var val = totals.sum && totals.sum[columnDef.field];
	if (val != null) {
		rowData += "<b>" + (Math.round(parseFloat(val) * 100 ) / 100) + "</b>";
	}

	return rowData;
}


function makeGridColumns(data){
	var that = this;
	var columns = [];
	var id = 0;

	// Parse given result for SlickGrid
	jQuery.each(data, function(label, name) {
		var item = {
			id: 		id++,
			field: 		label,
			name: 		name,
			focusable: 	false,
			groupTotalsFormatter:...