CODEWITHSUNDEEP
reactjsag-gridag-grid-react
Gashio Lee
Gashio Lee

Reputation: 129

What am I doing wrong with the ag-grid in react?

I'm trying to make the the ag-grid group selectable if say for example we have the care maker and you can select the parent and everything underneath that parent also gets selected.

I've looked into the ag-grid documentation but it looks like I'm doing everything right.

Here's my code below:

import React, { useState } from 'react';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

const DummyGrid = () => {
  const [gridApi, setGridApi] = useState(null);
  const columnDefs = [
    {
      headerName: 'Make', field: 'make', checkboxSelection: true , rowGroup: true, groupSelectsChildren: true
    },
    {
      headerName: 'Model', field: 'model'
    },
    {
      headerName: 'Price', field: 'price'
    }
  ]
  
  const onGridReady = (params) => {
    setGridApi(params.api);
  }
  const rowData = [
    { make: 'Honda', model: 'Chev', price: 6000 },
    { make: 'Honda', model: 'Civic', price: 120000 },
    { make: 'Toyota', model: 'Celica', price: 5000 },
    { make: 'Mitsubishi', model: 'GTR', price: 5000 }
  ]

  const handleClick = () => {
    const selectedNodes = gridApi.getSelectedNodes();
    const selectedData = selectedNodes.map(node => node.data);
    const selectedDataStringRepresentation =  selectedData.map(node => node.make + ' ' + node.model).join(', ');
    console.log(`The Data selected: ${selectedDataStringRepresentation}`);
  }

  return(
    <div className="ag-theme-balham"
        style={{
          width: 600,
          height: 600
        }}>
      <button onClick={handleClick}>Click this!</button>
      <AgGridReact  
        rowData = {rowData}
        columnDefs={columnDefs}
        rowSelection="multiple"
        onGridReady={onGridReady}
      />
    </div>
  );

};

export default DummyGrid;

As you can see from the output below that they're not grouping even though they the same maker. What am I doing wrong?

enter image description here

Upvotes: 0

Views: 622

Answers (1)

ViqMontana
ViqMontana

Reputation: 5698

2 things you're doing wrong.

First, you need to import the RowGroupingModule module and pass it to your grid as modules:

import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';


modules={[RowGroupingModule]}

Secondly, you need to set groupSelectsChildren on the grid itself, not on your column definition:

groupSelectsChildren={true}

Demo.

Upvotes: 2

Related Questions