Slickgrid : Flattened Data

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="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="http://mleibman.github.io/SlickGrid/controls/slick.pager.js"></script>
<button id='grouping'>Group</button>
<button id='clearGrouping'>Clear</button>
<br/>
<div id="myGrid" style="width:600px;height:250px;"></div>

JavaScript

var raw = [], flattened = [];

raw.push({id:0, Name: 'Parker', Animals: ['cats', 'dogs', 'birds'] })
raw.push({id:1, Name: 'Michael', Animals: ['cats', 'snakes'] })
raw.push({id:2, Name: 'Amit', Animals: ['c', 'd', 'b'] })
raw.push({id:3, Name: 'Himanshu', Animals: ['c', 's'] })
raw.push({id:4, Name: 'Anand', Animals: ['cp', 'dop', 'bips'] })
raw.push({id:5, Name: 'Shashi', Animals: ['ca6s', 'snakppes'] })
 debugger;
for(i in raw){
    for(a in raw[i].Animals){
        flattened.push({id: 'raw'+i+'animal'+a, Name: raw[i].Name, Animal: raw[i].Animals[a], Animals: raw[i].Animals})
    }
}

(function setGrid(d){
    var grid;
    var data = d;
    
     
    var columns = [
        { id : "1", name: "Name", field : "Name", width: 30}, 
        { id : "3", name: "Animals", field : "Animals"} 
    ];
        
    var options = {
        enableCellNavigation: true,
        forceFitColumns: true,
        multiSelect: false,
        syncColumnCellResize: true
    };
   
    dataView = new Slick.Data.DataView();
      
    
    $('#clearGrouping').click(function () {
        dataView.setItems(data.raw)
        dataView.setGrouping([])
    })
    
    $("#grouping").click(function () {  
        
         dataView.beginUpdate();
         dataView.setItems(data.flattened);
         dataView.endUpdate(); 
        
        dataView.setGrouping({
            getter: 'Animal',
            formatter: function (g) {
                return g.value + " <span style='color:green'>(" + g.count + " items)</span>";
            },
            aggregateCollapsed: false,
            lazyTotalsCalculation: true
            
        });
         
    });
     
    grid = new Slick.Grid("#myGrid", dataView, columns, options);
 
    grid.setSelectionModel(new Slick.RowSelectionModel());
 
    dataView.onRowsChanged.subscribe(function(e, args){
        grid.invalidateRows(args.rows);
        grid.render(); 
    });
    
    dataView.onRowCountChanged.subscribe(function (e, args) {
    ...