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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.debug.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js?1233"></script>
<script src="https://mleibman.github.com/SlickGrid/slick.grid.css"></script>
<script src="https://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="https://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<script src="https://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="https://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css"></script>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="https://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<script src="https://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<script src="https://mleibman.github.io/SlickGrid/slick.dataview.js"></script>

<body>
  <div id="entirecontent">
    <div id="myGrid"></div>
        <div id="editor"></div>
            </div>
        <button><a href="#" id="cmd">Download Pdf</a></button>
    </div>
</body>

JavaScript

$(document).ready(function () {
        var doc = new jsPDF();

       
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };

    });



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;

	//...