[data grid] How can I add an event handler on each row to handle file drops

[tibo-glamarche]

The problem in depth

I have a datagrid that contains files. I want to be able to drop new versions of the file on the row. To be able to do that, i need an event handler for the drop event on each row. How can i do that ?

Your environment

System: OS: Windows 11 10.0.22631 Binaries: Node: 18.16.1 - C:\Program Files\nodejs\node.EXE npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.61) npmPackages: @emotion/react: ^11.11.1 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/icons-material: ^5.11.16 => 5.15.15 @mui/material: ^5.13.5 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-charts: ^7.4.0 => 7.4.0 @mui/x-data-grid: 6.19.11 @mui/x-data-grid-pro: ^6.19.3 => 6.19.11 @mui/x-date-pickers: 7.4.0 @mui/x-date-pickers-pro: ^7.3.2 => 7.4.0 @mui/x-license: 7.2.0 @mui/x-license-pro: 6.10.2 @types/react: ^18.0.37 => 18.2.79 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.0.2 => 5.4.5

Search keywords: file upload drop Order ID: 75960

[michelengelen]

Hey @tibo-glamarche This should be no problem using the built in drag and drop mechanics.

<DataGridPro
  {...data}
  rowReordering={true}
  slotProps={{
    row: {
      onDragOver: (event) => {
        // Prevent default behavior (Prevent file from being opened)
        event.preventDefault();
        console.log('drag');
      },
      onDrop: (event) => {
        // Prevent default behavior (Prevent file from being opened)
        event.preventDefault();
        console.log('drop', event);
      },
    },
  }}
/>

Just be careful when using this in combination with row-reordering, since it will also use this events

[tibo-glamarche]

Thank you for your response. What would be the implications if I want to use row-reordering ?

[michelengelen]

Basically to not run expensive computations or similar, because whenever the rows get reordered we will call this event as well.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.