ag-Grid: could not find matching row model for rowModelType clientSide

I'm trying to recreate this example in the ag-grid docs: https://www.ag-grid.com/javascript-grid-master-detail/

and I'm getting this error which I'm not sure why. Everything else has seemed to work fine:

ag-Grid: could not find matching row model for rowModelType clientSide
ag-Grid: Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '@ag-grid-community/client-side-row-model';

And here is the exact code in my component:

import { HttpClient } from "@angular/common/http";
import { AllModules } from "@ag-grid-enterprise/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [modules]="modules"
      [columnDefs]="columnDefs"
      [masterDetail]="true"
      [detailCellRendererParams]="detailCellRendererParams"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class TopsheetComponent {
  private gridApi;
  private gridColumnApi;
  public modules  = AllModules;

  private columnDefs;
  private detailCellRendererParams;
  private rowData;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "name",
        cellRenderer: "agGroupCellRenderer"
      },
      { field: "account" },
      { field: "calls" },
      {
        field: "minutes",
        valueFormatter: "x.toLocaleString() + 'm'"
      }
    ];
    this.detailCellRendererParams = {
      detailGridOptions: {
        columnDefs: [
          { field: "callId" },
          { field: "direction" },
          { field: "number" },
          {
            field: "duration",
            valueFormatter: "x.toLocaleString() + 's'"
          },
          { field: "switchCode" }
        ],
        onFirstDataRendered: function(params) {
          params.api.sizeColumnsToFit();
        }
      },
      getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
      },
      template: function(params) {
        var personName = params.data.name;
        return (
          '<div style="height: 100%; background-color: #EDF6FF; padding: 20px; box-sizing: border-box;">' +
          '  <div style="height: 10%;">Name: ' +
          personName +
          "</div>" +
          '  <div ref="eDetailGrid" style="height: 90%;"></div>' +
          "</div>"
        );
      }
    };
  }

  onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
    setTimeout(function() {
      params.api.getDisplayedRowAtIndex(1).setExpanded(true);
    }, 0);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid-docs/latest/src/javascript-grid-master-detail/template-callback-customisation/data/data.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

It's pretty much identical to the example in the docs.

Here are the dependencies in my package.json

"dependencies": {
    "@ag-grid-enterprise/all-modules": "^22.1.2",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "ag-grid-enterprise": "^22.1.1",
}

Without all of these dependencies, I run into issues. Is there something I'm missing here? I've added everything correctly in my app.module.ts as well:

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
    imports: [
       AgGridModule.withComponents([])
    ]
})

^ This was shortened to make it easier to read. But am I missing something obvious here?

I apologize for this but I created a StackBlitz and the stupid thing would not allow me to fork. This is not a complete answer but I am providing it here because it is too long for a comment.

Like you, I was going crazy as well and nothing was working. I was getting the same error as you and when I changed it to ClientSideRowModelModule, I would get a warning that I cannot use MasterDetail because it is not imported.

Try providing the modules globally as outlined here (https://www.ag-grid.com/javascript-grid-modules/) in main.ts. If I can recall correctly, I imported ModuleRegistry from @ag-grid-community/all-modules (@ag-grid-enterprise/all-modules did not have it like they show in the documentation), import AllModules from @ag-grid-enterprise/all-modules and then do ModuleRegistry.registerModules(AllModules); right before platformBrowserDynamic().bootstrapModule. This removed the errors and warnings (just the error/warning of not providing a license key). The theming of it was off in my view but maybe that can be an easy fix.

IMO, this is bad documentation/implementation from ag-grid, seems to be all over the place. For instance, if you can't copy and paste their demonstration solution and for it not to work, pretty bad if you ask me.

Recommended topics

Hot tags