title: Ag-Grid Angular Tree Data with Group Header
body: <p>I am trying to adapt the Ag-Grid Org Hierarchy Tree Data example to my application.  Here is what I have so far:  <a href="https://plnkr.co/edit/rfK0uqKPPWJig7dx" rel="nofollow noreferrer">https://plnkr.co/edit/rfK0uqKPPWJig7dx</a></p>
  <pre><code>    var rowData = [
    {  ID: 1,
      Path: '1/1', // [Group: 1, ID: 1]
      GroupID: 1,
      GroupName: 'Group 1',
      Name: '1. Row A'
    },
    {  ID: 2,
      Path: '1/2',
      GroupID: 1,
      GroupName: 'Group 1',
      Name: '2. Row B'
    },
    {  ID: 3,
      Path: '1/2/3', //[Group: 1, Parent: 2, ID: 3]
      GroupID: 1,
      GroupName: 'Group 1',
      Name: '2.1 Row C'
    },
    {  ID: 4,
      Path: '2/4',
      GroupID: 2,
      GroupName: 'Group 2',
      Name: '3. Row D'
    },
    {  ID: 5,
      Path: '2/4/5',
      GroupID: 2,
      GroupName: 'Group 2',
      Name: '3.1. Row E'
    },
    {  ID: 6,
      Path: '3/6',
      GroupID: 3,
      GroupName: 'Group 3',
      Name: '5. Row F'
    }
  ]
  
  var gridOptions = {
    defaultColDef: {
      flex: 1,
    },
    components: {
      simpleCellRenderer: getSimpleCellRenderer()
    },
    columnDefs: [
      { field: 'Path' ,
        headerName: 'Name',
        cellRenderer: 'agGroupCellRenderer',
        cellRendererParams: {
          suppressPadding: true,
          suppressCount: true,
          innerRenderer: 'simpleCellRenderer',
        },     
      },
    ],
    rowData: rowData,
    treeData: true,
    animateRows: true,
    groupDefaultExpanded: -1, 
    getDataPath: function(data) {
      return [data.Path.split('/')];
    },
  };
  
  // wait for the document to be loaded, otherwise
  // ag-Grid will not find the div in the document.
  document.addEventListener('DOMContentLoaded', function() {
    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');
  
    // create the grid passing in the div to use together with the columns &amp; data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
  });
  
  function getSimpleCellRenderer() {
    function SimpleCellRenderer() { }
  
    SimpleCellRenderer.prototype.init = function (params) {
      const tempDiv = document.createElement('div');
  
  // this obviously needs to be different as there are multiple levels
      if(params.node.group) {
        tempDiv.innerHTML = params.data.GroupName;
      } else {
        tempDiv.innerHTML = params.data.Name;
      }
      
      this.eGui = tempDiv.firstChild;
    };
    SimpleCellRenderer.prototype.getGui = function () {
      return this.eGui;
    };
    return SimpleCellRenderer;
  }
  </code></pre>
  <p>My path is major group id + tree hierarchy path.  GroupID/ParentRow/ParentRow/Row for example.  I'd like it to display in one grid column as</p>
  <p>Group 1<br/>
    Parent Row 1<br/>
      Parent Row 2<br/>
        Item 6<br/>
  Group 2<br/>
    Item 1<br/>
    Item 2<br/>
    Parent Row 3<br/>
      Item 3<br/></p>
  <p>As you can see, I have not gotten it to use the Path to group properly.  Also, in another example where I was able to get it to group by GroupID, I could not figure out how to display GroupName instead of GroupID.  So any information on that, would be helpful.  It seems like all of the examples I have found are using the Name to do the hierarchy but this will not work for my application.</p>