clone of slickGrid example-grouping.html

for fix issue #841 & #896 https://github.com/mleibman/SlickGrid/pull/898

HTML

<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/slick.core.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/slick.formatters.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/slick.editors.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/plugins/slick.cellrangedecorator.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/plugins/slick.cellrangeselector.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/plugins/slick.cellselectionmodel.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/slick.grid.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/slick.groupitemmetadataprovider.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/slick.dataview.js"></script>
<script src="https://rawgithub.com/icoxfog417/SlickGrid/issue841/controls/slick.pager.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/icoxfog417/SlickGrid/issue841/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/icoxfog417/SlickGrid/issue841/examples/examples.css">
<script src="https://rawgit.com/icoxfog417/SlickGrid/issue841/controls/slick.columnpicker.js"></script>
<div style="position:relative">
  <div style="width:600px;">
    <div class="grid-header" style="width:100%">
      <label>SlickGrid</label>
    </div>
    <div id="myGrid" style="width:100%;height:500px;"></div>
    <div id="pager" style="width:100%;height:20px;"></div>
  </div>

  <div class="options-panel" style="width:450px;">
    <b>Options:</b>
    <hr/>
    <div style="padding:6px;">
      <label style="width:200px;float:left">Show tasks with % at least: </label>

      <div style="padding:2px;">
        <div style="width:100px;display:inline-block;"...

CSS

.cell-effort-driven {
      text-align: center;
    }

    .slick-group-title[level='0'] {
      font-weight: bold;
    }

    .slick-group-title[level='1'] {
      text-decoration: underline;
    }

    .slick-group-title[level='2'] {
      font-style: italic;
    }

JavaScript

var dataView;
var grid;
var data = [];
var columns = [
  {id: "sel", name: "#", field: "num", cssClass: "cell-selection", width: 40, resizable: false, selectable: false, focusable: false },
  {id: "title", name: "Title", field: "title", width: 70, minWidth: 50, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text},
  {id: "duration", name: "Duration", field: "duration", width: 70, sortable: true, groupTotalsFormatter: sumTotalsFormatter},
  {id: "%", name: "% Complete", field: "percentComplete", width: 80, formatter: Slick.Formatters.PercentCompleteBar, sortable: true, groupTotalsFormatter: avgTotalsFormatter},
  {id: "start", name: "Start", field: "start", minWidth: 60, sortable: true},
  {id: "finish", name: "Finish", field: "finish", minWidth: 60, sortable: true},
  {id: "cost", name: "Cost", field: "cost", width: 90, sortable: true, groupTotalsFormatter: sumTotalsFormatter},
  {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, sortable: true}
];

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

var sortcol = "title";
var sortdir = 1;
var percentCompleteThreshold = 0;
var prevPercentCompleteThreshold = 0;

function avgTotalsFormatter(totals, columnDef) {
  var val = totals.avg && totals.avg[columnDef.field];
  if (val != null) {
    return "avg: " + Math.round(val) + "%";
  }
  return "";
}

function sumTotalsFormatter(totals, columnDef) {
  var val = totals.sum && totals.sum[columnDef.field];
  if (val != null) {
    return "TOTAL: " + ((Math.round(parseFloat(val)*100)/100));
  }
  return "";
}

function myFilter(item, args) {
  return item["percentComplete"] >= args.percentComplete;
}

function percentCompleteSort(a, b) {
  return a["percentComplete"] - b["percentComplete"];
}

function comparer(a, b) {
  var x = a[sortcol], y = b[sortcol];
  return (x == y ? 0 : (x > y ? 1 : -1));
}

function...