Set datapath for tree data ag grid

Question

I have a data like below

let data = [{id: 1,name: 'x', children: [{name:'y', id:2}, {name:'c', id: 3}]}]

I want to display tree data with client side row model

how to set getdata path and display parent row with name x and child rows with name y and c?

sandeep joshi sandeep joshi · Accepted Answer · 2020-10-30T05:17:17

nested children are difficult to use in TreeData mode. you need to restructure your data in datapath format so that it becomes easier for grid to render. I have written a simple flatten function to organize the data in hierarchy so that it can be easily consumed by grid. Also on the official documentation its very poorly documented so it makes sense that we restructure our data according to grid.

var rawData = [{id:9,name:'xx'},{id:10,name:'yy',children: [{
    name: 'yyy',
    id: 21,}]},{
  id: 1,
  name: 'x',
  children: [{
    name: 'y',
    id: 2,
    children: [{
      name: 'a',
      id: 4
    }, {
      name: 'b',
      id: 5
    }]
  }, {
    name: 'c',
    id: 3,
    children: [{
      name: 'd',
      id: 6
    }, {
      name: 'e',
      id: 7
    }]
  }]
}];
//function to flatten and make heirarchy

function flatten(arr, parentref) {
  return arr ? arr.reduce((result, item) => [

    ...result,
    {
      name: item.name,
      id: item.id,
      hierarchy: parentref ? [...parentref, item.name] : [item.name]
    },
    ...flatten(item.children, parentref ? [...parentref, item.name] : [item.name])
  ], []) : [];
}
var rowData = flatten(rawData);
var gridOptions = {
  columnDefs: [{
    field: 'id'
  }],
  defaultColDef: {
    flex: 1,
  },
  autoGroupColumnDef: {
    headerName: 'name',
    minWidth: 300,
    cellRendererParams: {
      suppressCount: true,
    },
  },
  rowData: rowData,
  treeData: true, // enable Tree Data mode
  animateRows: true,
  groupDefaultExpanded: -1, // expand all groups by default
  getDataPath: function(data) {
    return data.hierarchy;
  },
};

function onFilterTextBoxChanged() {
  gridOptions.api.setQuickFilter(
    document.getElementById('filter-text-box').value
  );
}

// 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 & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);
});

.example-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#myGrid {
  flex: 1 1 0px;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    var __basePath = './';
  </script>
  <style media="only screen">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    
    html {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      overflow: auto;
    }
    
    body {
      padding: 1rem;
      overflow: auto;
    }
  </style>
  <script src="https://unpkg.com/@ag-grid-enterprise/[email protected]/dist/ag-grid-enterprise.min.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="example-wrapper">
    <div style="margin-bottom: 5px;">
      <input type="text" id="filter-text-box" placeholder="Filter..." oninput="onFilterTextBoxChanged()" />
    </div>
    <div id="myGrid" class="ag-theme-alpine"></div>
  </div>

</body>

</html>

Set datapath for tree data ag grid

1 Answers