CODEWITHSUNDEEP
reactjsag-gridag-grid-react
Dev-2019
Dev-2019

Reputation: 557

AG Grid Community React version complaining "could not find matching row model for rowModelType clientSide"

I decided to us AG Grid community react version for some of my datagrid purposes. followed the installtion from the https://www.npmjs.com/package/@ag-grid-community/react and used the exact same code from there documentation, but i got a strange error

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

Did anyone have any solution for this issue? code is added for referece.

import react, {useState} from "react";
import {AgGridColumn, AgGridReact} from '@ag-grid-community/react';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

export default function DataGrid() {

    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);

    const [rowData, setRowData] = useState([
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 }
    ]);

    const onGridReady = params => {
        setGridApi(params.api);
        setGridColumnApi(params.columnApi);
    }

    return (
        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
            <AgGridReact
                onGridReady={onGridReady}
                rowData={rowData}>
                <AgGridColumn field="make"></AgGridColumn>
                <AgGridColumn field="model"></AgGridColumn>
                <AgGridColumn field="price"></AgGridColumn>
            </AgGridReact>
        </div>
    );
}

Upvotes: 1

Views: 3620

Answers (1)

Dev-2019
Dev-2019

Reputation: 557

I got the solution,

Install 1 new package using,

npm install --save @ag-grid-community/all-modules

Import AllCommunityModules from above package

Here is the final code

import react, {useState} from "react";
import {AgGridColumn, AgGridReact} from '@ag-grid-community/react';
import {AllCommunityModules} from "@ag-grid-community/all-modules"
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

export default function DataGrid() {

    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);

    const [rowData, setRowData] = useState([
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 }
    ]);

    const onGridReady = params => {
        setGridApi(params.api);
        setGridColumnApi(params.columnApi);
    }

    return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
            modules={AllCommunityModules}
            onGridReady={onGridReady}
            rowData={rowData}>
            <AgGridColumn field="make"></AgGridColumn>
            <AgGridColumn field="model"></AgGridColumn>
            <AgGridColumn field="price"></AgGridColumn>
        </AgGridReact>
    </div>
);

}

Upvotes: 1

Related Questions