[question] premium plan user trying to do multi level grouping on the same column

[elizabethtrambulo]

Order ID or Support key 💳 (optional)

68277

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I want to be able to show a hierarchy of people in an organization using datagrid.

The organizations themselves can be nested. So an example I could have Military -> Navy -> Navy Seals.

Currently, I'm only seeing them group by the parent organization, which is what I've set it to. How do I achieve multiple nested levels using the same column?

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[cherniavskii]

Hey @elizabethtrambulo
You can have multiple grouping criteria in the grouping model - see this demo for example.
Is this what you're looking for?

[elizabethtrambulo]

Hm, I feel like this might be different. The model I'm using allows for nested groups. So for example, Commercial Target Walmart Automotive Military Army Navy Seals Marines Civilian Other My schema is OrganizationId, Name, ParentOrganizationId.

…

On Tue, Jun 13, 2023 at 9:04 AM Andrew Cherniavskii < ***@***.***> wrote: Hey @elizabethtrambulo <https://github.com/elizabethtrambulo> You can have multiple grouping criteria in the grouping model - see this demo <https://mui.com/x/react-data-grid/row-grouping/#single-grouping-column> for example. Is this what you're looking for? — Reply to this email directly, view it on GitHub <#9309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A74FCSKCEKAOQLWG55RY6CDXLCFSHANCNFSM6AAAAAAZEIQBUY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[romgrk]

Maybe you're looking for tree data instead of grouping?

[elizabethtrambulo]

Hm tree data might be the way. So I tried implementing it and got the following error. Can rows not have the same path? react-dom.development.js:23272 Uncaught Error: MUI: The path returned by `getTreeDataPath` should be unique. The rows with id #30 and #31 have the same. Path: ["Air Force","Military"]. at onDuplicatePath (useGridTreeDataPreProcessors.js:78:1) at insertDataRowInTree (insertDataRowInTree.js:68:1) at createRowTree (createRowTree.js:16:1) at useGridTreeDataPreProcessors.js:81:1 at useGridStrategyProcessing.js:85:1 at Proxy.applyStrategyProcessor (useGridApiMethod.js:14:1) at getRowsStateFromCache (gridRowsUtils.js:88:1) at rowsStateInitializer (useGridRows.js:20:1) at useGridInitializeState (useGridInitializeState.js:5:1) at useDataGridPremiumComponent (useDataGridPremiumComponent.js:41:1)

…

On Wed, Jun 14, 2023 at 12:36 PM Rom Grk ***@***.***> wrote: Maybe you're looking for tree data <https://mui.com/x/react-data-grid/tree-data/> instead of grouping? — Reply to this email directly, view it on GitHub <#9309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A74FCSOL4EAJW2JRJ2FXZ2DXLIHCTANCNFSM6AAAAAAZEIQBUY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[romgrk]

IIRC path should include the row's own id, e.g. ['military', 'air force', 'division 1']

[elizabethtrambulo]

Got it. That's helpful. If I have an action column, how do I get it to not show on the aggregate row?

…

On Thu, Jun 15, 2023 at 8:39 AM Rom Grk ***@***.***> wrote: IIRC path should include the row's own id, e.g. ['military', 'air force', 'division 1'] — Reply to this email directly, view it on GitHub <#9309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A74FCSLCQP76G5Y34IBRW7DXLMUD5ANCNFSM6AAAAAAZEIQBUY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[romgrk]

I'm not exactly sure, but you could maybe try defining the behavior with renderCell.

[elizabethtrambulo]

I get this error when trying to update rows in a grid using the tree data format. TypeError: Cannot read properties of undefined (reading 'id') at getRowId (organizations.js:204:1) at getRowIdFromRowModel (gridRowsUtils.js:31:1) at useGridRows.js:122:1 at Array.forEach (<anonymous>) at useGridRows.js:121:1 at Proxy.updateRows (useGridApiMethod.js:14:1) at useGridCellEditing.js:327:1 I suspect it has something to do with the grouped rows. I have this as part of my grid getRowId={(row) => row.id}

…

On Sun, Jun 18, 2023 at 6:06 PM Rom Grk ***@***.***> wrote: I'm not exactly sure, but you could maybe try defining the behavior with renderCell <https://mui.com/x/api/data-grid/grid-col-def/#properties>. — Reply to this email directly, view it on GitHub <#9309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A74FCSITZV2QKDZZ2KMWJXLXL6QYRANCNFSM6AAAAAAZEIQBUY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[romgrk]

Is it possible one of your rows is undefined? Note that we can't provide assistance unless you have a live example. This codesandbox.io template is a good starting point. Also note that if your row's id is .id, you don't need to define getRowId.

[elizabethtrambulo]

I updated the sandbox with my code. Not sure why the rows aren't rendering. here's a screenshot of the console log. You'll see the ids are there for all the rows after the mutation and then immediately when the grid tries to update, it gets an error. [image: image.png]

…

On Tue, Jun 20, 2023 at 11:56 AM Rom Grk ***@***.***> wrote: Is it possible one of your rows is undefined? Note that we can't provide assistance unless you have a live example. This codesandbox.io template <https://codesandbox.io/s/7tyjsv?file=/demo.tsx> is a good starting point. Also note that if your row's id is .id, you don't need to define getRowId. — Reply to this email directly, view it on GitHub <#9309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A74FCSIJD2CSAWZY3YPBKODXMHW4NANCNFSM6AAAAAAZEIQBUY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[romgrk]

Which sandbox? If you make modifications, you need to share the updated link. Your github message also doesn't include the screenshot, it may be preferable to use github directly, mail replies don't integrate well.

[elizabethtrambulo]

Hopefully this works.

https://codesandbox.io/s/modest-frog-qty3v4?file=/index.tsx

[romgrk]

The live example you have provided does not work. Make sure to provide a live example where we can reproduce the issue you're experiencing.

[elizabethtrambulo]

Mine doesn't look like that at all

[romgrk]

Where is the code for your processRowUpdate in the codesandbox coming from? Did you write it yourself?

From what I can see in our docs, it's supposed to resolve to the updated row: https://mui.com/x/react-data-grid/editing/#server-side-validation

[elizabethtrambulo]

That resolved my issue. Thanks.

…

On Tue, Jun 20, 2023 at 2:13 PM Rom Grk ***@***.***> wrote: Where is the code for your processRowUpdate in the codesandbox coming from? Did you write it yourself? From what I can see in our docs, it's supposed to resolve to the updated row: https://mui.com/x/react-data-grid/editing/#server-side-validation — Reply to this email directly, view it on GitHub <#9309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A74FCSLU5ALW2BMSYTLUGSTXMIHA7ANCNFSM6AAAAAAZEIQBUY> . You are receiving this because you were mentioned.Message ID: ***@***.***>