Is there a way to toggle the detail panel from within a menu instead of on cell click?

[pjwise-korio]

Order ID 💳

50140

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Looking for the best way to toggle master detail panel within a menu instead of immediately after cell click.

I'm currently using GRID_DETAIL_PANEL_TOGGLE_FIELD in my column definitions like so
{ field: GRID_DETAIL_PANEL_TOGGLE_FIELD, flex: 1, headerName: 'Details', sortable: false, align: 'right', headerAlign: 'right', renderCell: (params: GridRenderCellParams) => { return ( <> <IconButton aria-label='expand row' size='small' onClick={handleClickListItem} id='user_options'> <MoreVertIcon /> </IconButton> <Menu id='user-more-menu' anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{ 'aria-labelledby': 'lock-button', role: 'listbox', }} > {options.map((option: any, index: any) => ( <MenuItem key={option} value={option} id={option-${index}} // selected={index === selectedIndex} onClick={(event: any) => handleMenuItemClick(option, event, index, rows._id)} > {option} </MenuItem> ))} </Menu> </> ); }, }

is there a way to toggle the expansion of the detail panel on "View User Profile" click instead?

Your environment 🌎

`npx @mui/envinfo`

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

[pjwise-korio]

[cherniavskii]

Hey @pjwise-korio
You can do the following:

1. Hide the detail panel toggle column using columnVisibilityModel
2. Use actions column type to add a row menu
3. Toggle the detail panel using apiRef

Here's a working demo: https://codesandbox.io/s/focused-kare-3gyd7l?file=/demo.tsx

Let me know if this is sufficient for your use case.

[pjwise-korio]

@cherniavskii Thank you very much for the codepen. Reviewing it now!

[pjwise-korio]

@cherniavskii This works much better than the way I originally had this set up. Thank you very much! I did have one question that came up during set up - what is the difference between GridColumns and GridColDef?

[cherniavskii]

what is the difference between GridColumns and GridColDef?

GridColDef doesn't allow to declare actions column type. GridColumns does. You can also use GridEnrichedColDef instead of GridColDef.

I'll open a discussion to make this less confusing in v6. I believe we can eliminate the need of using GridColumns and GridEnrichedColDef.

[cherniavskii]

@pjwise-korio I've created this RFC #7188. Feel free to comment if you want to share your opinion on this :)

[cherniavskii]

I'm closing this issue, since it's resolved