Search code examples
javascriptangularag-gridag-grid-angular

Ag Grid Row Grouping - keys.map is not a function

I was having an issue with getting row grouping working in AG Grid. I was going off the example the documentation provides here and using the tree data example.

My code is barely changed from the example, yet I'm getting a keys.map is not a function error: enter image description here

@Component({
  selector: 'my-app',
  template: `<div class="example-wrapper">
    <div style="margin-bottom: 5px;">
      <input
        type="text"
        id="filter-text-box"
        placeholder="Filter..."
        (input)="onFilterTextBoxChanged()"
      />
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      [modules]="modules"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [rowData]="rowData"
      [treeData]="true"
      [animateRows]="true"
      [groupDefaultExpanded]="groupDefaultExpanded"
      [getDataPath]="getDataPath"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  </div> `,
})
export class AppComponent { 
  private gridApi!: GridApi; 

  public modules: Module[] = [ClientSideRowModelModule, RowGroupingModule];
  public columnDefs: ColDef[] = [
    // we're using the auto group column by default!
    { field: 'PY DNRev' },
    { field: 'PY vs LY DNREv Chg' },
  ];
  public defaultColDef: ColDef = {
    flex: 1,
  };
  public autoGroupColumnDef: ColDef = {
    headerName: 'Planning Product',
    minWidth: 300,
    cellRendererParams: {
      suppressCount: true,
    },
  };
  public rowData: any[] | null = getData();
  public groupDefaultExpanded = -1;
  public getDataPath: GetDataPath = function (data) {
    return data.Parent;
  };

  onFilterTextBoxChanged() {
    this.gridApi.setQuickFilter(
      (document.getElementById('filter-text-box') as any).value
    );
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api; 
  }
}

I've created a plunkr here that recreates my error: https://plnkr.co/edit/UOypa8qvYmgKwz25

It has to be data-related, but I can't figure out why it doesn't like the data I'm providing.

Solution

  • Figured it out like 20 seconds after posting this. HA

    The first parent data element wasn't an array. It was just a string and it needed to be a single element array.

    "Parent": "Total Postmix"

    needed to be

    "Parent": ["Total Postmix"]