[question] Data Grid - Row ordering doesn't update order of rows for datagrid with rows more than 10.

[minchaej]

Order ID

I am a premium user but shouldn't this be a secret?

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Hi team MUI,

As seen from above, I am using the Row ordering feature that is included in the premium plan. However, if the rows are more than 10, which exceeds the height of the datagrid, I have to use either scroll or hover to place the most bottom row to the most top row. As per the row ordering feature, if I let go of my left mouse button, the row ordering event should be fired thus reordering the rows, however, the row ordering does not work at all. Is there a way to fix this problem?

How to reproduce:

1. Create a datagrid of fixed height like mine and have numerous rows.
2. Use the drag and drop row ordering feature to bring bottom row to the top
3. Doesn't update the reorder value, reordering event not fired.

Thank you so much!

Your environment 🌎

`npx @mui/envinfo`

On all env, safari, ie, chrome etc..

[MBilalShafi]

I couldn't manage to reproduce the problem, on this codesandbox fork of the official row reordering demo, I was able to reorder the rows and the onRowOrderChange callback fired whenever I tried to reorder a row.

reorder-example.mp4

Could you try forking the codesandbox example I linked above and see if you can reproduce the issue there? If yes, please do any sufficient changes to the codesandbox for the minimal reproduction and share them here along with the reproduction steps. This will help identify the problem and fix it better.

Thank You

[minchaej]

@MBilalShafi Thank you so much for the reply! Absolutely, I will try it again and will let you know. Thanks!

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[minchaej]

@MBilalShafi Thank you for your support. I have attached the video of the issue.
For this video, I have exactly copied your code on sandbox and executed on my local machine. So the code is 100% the same. The white theme is on safari, and the dark theme is on chrome.

As you can see, if I drag the bottom item to the top, the onChange event is not fired (no console log). Well, it DOES look like the orderings have changed on the UI, but since the onChange event is not fired, the order is not changed on the data level. as evident from firing the onChange event that brings the bottom item bottom again.

Could you please try to execute your code on a local machine? I can replicate this issue very consistently. Thank you!

mui-x-Issue-10459-Video.mp4

[minchaej]

@MBilalShafi Can I get some support please? Thanks!

[cherniavskii]

Hi @minchaej
The issue you're describing looks like a duplicate of #6165
The fix for it was released in https://github.com/mui/mui-x/releases/tag/v6.10.2
Which version of the data grid are you using?

[minchaej]

@cherniavskii I am using Next "version": "13.4.12". Isn't this pretty recent? That issue seems pretty old to me. Thanks!

[cherniavskii]

@minchaej I meant the @mui/x-data-grid-premium package, which version are you using?

[minchaej]

@cherniavskii Oops my bad! Got it, you are right, the issue is fixed in the update. Thanks for the support! I will close this issue as it is resolved now. Thanks again!