Remove leaf level row in ag grid

user_8894429 0
Viewed 494

I have a requirement where I need to delete/hide leaf level record in ag grid since it shows the confusing behavior to the end user. As shown in the screenshot I need to delete/hide last records(highlighted in red) in each group since the record above it depicts the same data.

enter image description here

I have tried to remove using updateRowData like this:

 this.gridApi.forEachLeafNode(function(rowNode, index) {
     self.gridApi.updateRowData({ remove: [rowNode.data] });
   });

The above piece of code deletes all data since in my case the data shown in 2nd and 3rd(leaf) level are same. Is there anyway I can delete only the one's that are marked in red.

Also I have tried other techniques like adding data to leaf level records as the document suggests, but nothing worked.

PS: Deleting may not be the only option. If its possible not to render then also the requirement will be fulfilled. Any guidance will be helpful

ag-grid-angular ag-grid javascript
2 Answers

Not sure if it's the best one, but here is one solutions.

Say you have your grid template something like this

<ag-grid-angular
  #agGrid
  [rowData]="rowData"
  ... // snip!
  [getDataPath]="getDataPath"  // This one is key
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

And data something like this:

this.rowData = [
  { entry: ['A'] },
  {
    entry: ['A', 'B'],
  },
  {
    entry: ['C', 'D'],
  },
  {
    entry: ['E', 'F', 'G', 'H'],
  },
];

Later when you declare the functions:

this.getDataPath = function(data) {
  // This returns the hiarchy normally
  return data.entry;     
};

But what if we could modify it a little?

this.getDataPath = function(data) {
  // If there are more than two levels, we'll just slice those off.        
  if( data.entry.length > 2 ) {
    return data.entry.slice(0,2);
  }
  return data.entry;
};

Of course we could compare values or filter before we slice.

(I've barely touched angular, but I followed the plunker links from here https://www.ag-grid.com/javascript-grid-tree-data/ and did some simple editing.)

user_14975330

You'll find that if you enable Pivoting as explained here it'll no longer show the final leaf-nodes. There are however many side-effects of swapping to PivotMode which you should test against.

user_25206060
Related