[data grid] How to disable collapse button for DataGrid Master detail conditionally?

[sanlee13]

The problem in depth

Hello,

I have a DataGrid that makes use of the master details, when I expand a row, I display an edit button which toggles an edit mode flag, when the edit mode is enabled, I want the collapse button to be disabled and removed to prevent the user from clicking it by mistake. This seems like a trivial task but am unable to find a way to do this.

Thanks for your time

Your environment

`npx @mui/envinfo`

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

Search keywords: disable collapse button for DataGrid Master detail.
Order ID: 82571

[michelengelen]

Hey @sanlee13
Is the edit mode triggering the cell/row edit mode?
Or is it a custom state inside the master detail content?

To accomplish this you would need to pass a custom cell renderer to the toggle column and find a way to pass the edit state from your master detail to that toggle renderer.

Could you maybe provide us with a minimal reproduction demo in codesandbox or stackblitz? That would help a lot!

[sanlee13]

Hey @michelengelen,
So, when I expand the row, I have button that toggles a custom state that resides in the context data store. When I click the edit, I want to disable the row toggle (expand/collapse).

Here is a sandbox I made: https://codesandbox.io/p/sandbox/quirky-ptolemy-hdlrzd?file=%2Fsrc%2FDemo.js%3A25%2C5

EDIT: Keep an eye on the console

[michelengelen]

Hey @sanlee13
Is this what you are trying to achieve?

DEMO

This is making use of the row model and the apiRef.

[sanlee13]

Hey @michelengelen,
Yes, this is precisely what I'm aiming to achieve. Your approach is fascinating and something I wouldn't have considered on my own.

Thank you very much for your assistance.

[michelengelen]

Great that this solution works for you.

@cherniavskii should we maybe add this as a recipe to the docs?

[cherniavskii]

@michelengelen I don't love the idea of mutating row data to reflect the editing state TBH.
Forking GridDetailPanelToggleCell isn't perfect either.
I forked your demo and made 2 changes:

• used React context for editing state
• reused GridDetailPanelToggleCell component

https://codesandbox.io/p/sandbox/silent-frog-tqp59h

What do you think?

[michelengelen]

Yes, that's a great solution.
I was thinking of using state or context at first as well, but honestly don't know why i diverted from that. Probably because using state would potentialy lead to unnecessary rerenders 🤷🏼

Thanks for providing that solution ... the question still stands though: should we add something like this as a recipe?

[cherniavskii]

the question still stands though: should we add something like this as a recipe?

It seems to be a quite niche use case, I would wait for upvotes on this first.