Slickgrid : Tree / Filter Grouping

by JDeLay_JR

HTML

<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.groupitemmetadataprovider.js"></script>
<script src="https://raw.githubusercontent.com/mleibman/SlickGrid/master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<div id="myGrid" style="width:600px;height:500px;"></div>

CSS

.cell-title {
      font-weight: bold;
      color: red;
    }

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

    .toggle {
      height: 9px;
      width: 9px;
      display: inline-block;
    }

    .toggle.expand {
      background: url(http://mleibman.github.io/SlickGrid/images/expand.gif) no-repeat center center;
    }

    .toggle.collapse {
      background: url(http://mleibman.github.io/SlickGrid/images/collapse.gif) no-repeat center center;
    }

JavaScript

var toggleFormatter = function (row, cell, value, columnDef, dataContext) {
value = value.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
var idx = dataView.getIdxById(dataContext.id);
if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
if (dataContext._collapsed) {
return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
} else {
return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
}
} else {
return spacer + " <span class='toggle'></span>&nbsp;" + value;
}
};
var dataView;
var grid;
var data = [];
var columns = [
    {id: "title", name: "Title", field: "title", formatter: toggleFormatter},
  {id: "amount", name: "Amount", field: "amount"}, 
  {id: "weight", name: "Weight", field: "weight"}
];

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

 

function myFilter(item) {
  
  if (item.parent != null) {
    var parent = data[item.parent.id];
       
    while (parent) {
      if (parent._collapsed) {
        return false;
      }
        parent = data[parent.parent ? parent.parent.id : null];
         
    }
  }

  return true;
}



$(function () {
  var indent = 0;
  data = [{title: 'BEHAVIOR MASTER FIM', amount: '', price: '', weight: '46.79', indent: 0, parent: null},
  {title: 'Real $', amount: '-1,056,495.73', price: '55.90', weight: '-2.01', indent: 1, parent:{id: 0}},
  {title: 'ALPARGATAS PN N1', amount: '12,200.00' , price: '0.39', weight: '1', indent: 1, parent:{id: 0}},
  {title: 'AMBEV PN', amount: '301,000.00', price: '34.41',  weight: '2', indent: 1, parent:{id: 0}},
  {title: 'AMAZONIA ON', amount: '38,500.00' , price: '27.59', weight: '1.3', indent: 1, parent:{id: 0}},
  {title: 'BRASIL ON NM', amount: '', price: '',  weight: '2.1', indent: 0, parent: null },
  {title: 'BRADESCO PN N1', amount: '301,000.00' , price: '0.39', weight: '4.6',...