title: Ag-grid tree data feature is not showing data
body: <p>I am trying to make this work for two days now. I am trying to show Tree data in Ag-grid in ReactJS using this article : <a href="https://www.ag-grid.com/javascript-grid-server-side-model-tree-data/" rel="nofollow noreferrer">https://www.ag-grid.com/javascript-grid-server-side-model-tree-data/</a></p>
  
  <p>Maybe I missed something from their documentation. Please someone help.</p>
  
  <p>Obviously their Tree data is an enterprise feature and I referred to their server side model.</p>
  
  <p>Expected functionality : 
  Tree data feature with data from server.
  Two modes : one time fetching all data 
  Or lazy loading for batch wise data</p>
  
  <p>My JSON is as follows:</p>
  
  <pre><code>[{
      "employeeId": 101,
      "employeeName": "Erica Rogers",
      "jobTitle": "CEO",
      "employmentType": "Permanent",
      "children": [{
          "employeeId": 102,
          "employeeName": "Malcolm Barrett",
          "jobTitle": "Exec. Vice President",
          "employmentType": "Permanent",
          "children": [
              {
              "employeeId": 103,
              "employeeName": "Leah Flowers",
              "jobTitle": "Parts Technician",
              "employmentType": "Contract"
              },
              {
              "employeeId": 104,
              "employeeName": "Tammy Sutton",
              "jobTitle": "Service Technician",
              "employmentType": "Contract"
              }
           ]
        }]
  }]
  </code></pre>
  
  <p>And 
   Code:</p>
  
  <pre><code>    import React, { Component } from 'react';
      import { AgGridReact } from 'ag-grid-react';
      import 'ag-grid-community/dist/styles/ag-grid.css';
      import 'ag-grid-community/dist/styles/ag-theme-balham.css';
      import 'ag-grid-enterprise';
  
      export default class App extends Component {
          constructor(props) {
              super(props);
              this.state = {
                  columnDefs: [
                      { field: "jobTitle" },
                      { field: "employmentType" }
                  ],
                  matchGridData: [],
                  autoGroupColumnDef: {
                      headerName: "Model",
                      field: "model",
                      cellRenderer: 'agGroupCellRenderer',
                      cellRendererParams: {
                          checkbox: true
                      }
                  },
  
                  // indicate if row is a group node
                  isServerSideGroup: function (dataItem) {
                      return dataItem.group;
                  },
  
                  // specify which group key to use
                  getServerSideGroupKey: function (dataItem) {
                      return dataItem.MatchGroup;
                  }
              }
          }
  
          render() {
              return (
                  &lt;div
                      className="ag-theme-balham"
                      style={{
                          height: '500px',
                          width: '600px'
                      }}
                  &gt;
  
                      &lt;AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.matchGridData} rowSelection="multiple"
                          onGridReady={params =&gt; this.gridApi = params.api} treeData={true} isServerSideGroup={this.state.isServerSideGroup}
                          getServerSideGroupKey={this.state.getServerSideGroupKey}
                          rowModelType='serverSide'
                      &gt;
                      &lt;/AgGridReact&gt;
                  &lt;/div&gt;
              );
          }
  </code></pre>
  
  <p><strong>EDIT</strong>:
  I have prepared a small test repository on Github dedicated to this issue and in this GridExampleGrouping.js is being rendered but not GridExampleTreeServer.js
  : <a href="https://github.com/HarvestAdmin/test-grid" rel="nofollow noreferrer">https://github.com/HarvestAdmin/test-grid</a></p>
  
  <pre><code>        getMatchingData = e =&gt; {
              fetch('/Matching/ResultGrid.aspx/GetMatchingData', {
                  method: 'POST',
                  body: JSON.stringify({ userId: this.state.userId, executionId: this.state.matchOrExecutionId, outputType: this.state.outputType, action: this.state.action }),
                  headers: {
                      "Content-Type": "application/json; charset=UTF-8",
                      "Accept": "application/json, text/javascript, */*; q=0.01",
                      "X-Requested-With": "XMLHttpRequest"
                  }
              })
                  .then(response =&gt; {
                      return response.json();
                  }, error =&gt; {
                      return error.json();
                  })
                  .then(jsonResponse =&gt; {
                      var result = JSON.parse(jsonResponse.d);
                      console.log(result);
                      this.setState({ matchGridData: result.SearchResults.Table });
                  });
          }
  
      }
  </code></pre>
  
  <p><strong>Pic 1 : The output in browser</strong> : <a href="https://i.stack.imgur.com/UnngO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UnngO.png" alt="enter image description here"></a></p>
  
  <p><strong>Pic 2 : The console for above output</strong>: <a href="https://i.stack.imgur.com/WG4Cc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WG4Cc.png" alt="enter image description here"></a>
  <strong>Pic 3 : Even after applying a Trial license given by Ag-grid</strong> : <a href="https://i.stack.imgur.com/QNAeh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QNAeh.png" alt="enter image description here"></a></p>