Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGridPro] Update onColumnOrderChange behaviour to match onRowsOrderChange #6126

Closed
2 tasks done
Tracked by #3287
vbynda-gresham opened this issue Sep 12, 2022 · 12 comments 路 Fixed by #7385
Closed
2 tasks done
Tracked by #3287

[DataGridPro] Update onColumnOrderChange behaviour to match onRowsOrderChange #6126

vbynda-gresham opened this issue Sep 12, 2022 · 12 comments 路 Fixed by #7385
Assignees
Labels
breaking change component: data grid This is the name of the generic UI component, not the React module! feature: Reordering Related to the data grid Reordering feature support: commercial Support request from paid users

Comments

@vbynda-gresham
Copy link

Order ID 馃挸

45466

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

The problem in depth 馃攳

Dear Developer,

I can see in your documentation following:
_In addition, column reordering emits the following events that can be imported:

columnHeaderDragStart: emitted when dragging of a header cell starts.
columnHeaderDragEnter: emitted when the cursor enters another header cell while dragging.
columnHeaderDragOver: emitted when dragging a header cell over another header cell.
columnHeaderDragEnd: emitted when dragging of a header cell stops._

I am not quite sure how to do it. Is there an example of it? I would like to use columnHeaderDragEnd event.
onColumnOrderChange is fired multiple times as column dragged through the header. This is not working for me as we are updating API with column order. 'Drag end' would be perfect for us.

Thank you.

Your environment 馃寧

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
@vbynda-gresham vbynda-gresham added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Sep 12, 2022
@alexfauquette
Copy link
Member

We do not have demo using it, because it's mostly for internal use.

You can use it like other events. Its parameters are simple. you will get the field of the column on which the dragEnd occurred.

What are you trying to achieve when the drag end occurs?

@vbynda-gresham
Copy link
Author

Thank you for the link.
In out application column state is saved in DB via API. When column is moved DB record is updated. onColumnOrderChange generates multiple events as column moves. It feels like a waste of effort to send API messages as column move is not completed. 'drag end' or another event that archives the same(end of move) would be perfect.

I think it is a very common setup, in enterprise apps, for state of the grid to be saved in DB. Is it possible to have this even exposed as grid event handler?

@DanailH
Copy link
Member

DanailH commented Sep 14, 2022

Hi @vbynda-gresham why aren't you using the onColumnOrderChange prop to react on reordering columns? you can check it's signature here -> https://mui.com/x/api/data-grid/data-grid/#heading-props
On another hand, we might benefit from creating a demo showcasing the usage of this prop.

@DanailH DanailH added docs Improvements or additions to the documentation component: data grid This is the name of the generic UI component, not the React module! feature: Reordering Related to the data grid Reordering feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer docs Improvements or additions to the documentation labels Sep 14, 2022
@DanailH DanailH changed the title [question] columnHeaderDragEnd how to use it? [question] How to use the columnHeaderDragEnd event? Sep 14, 2022
@alexfauquette
Copy link
Member

Here is the demo :)

I had to use a ref instead of a state, because if the drop is not well place, the column order is revet just before dispatching the columnHeaderDragEnd event. So the state would not be up to date

https://codesandbox.io/s/eager-shamir-5grln1?file=/demo.tsx

@vbynda-gresham
Copy link
Author

onColumnOrderChange fires event as column dragged over the other column(not dropped yet). If i drag my column over 10 columns, it will fire 10 events. I have not interest in those. I have no interest tying to filter or debounce them. I need to know when the column is dropped, in other words, user finished re-ordering. At this point i can save new column layout.

@vbynda-gresham
Copy link
Author

@alexfauquette Thank you for the demo https://codesandbox.io/s/eager-shamir-5grln1?file=/demo.tsx. It reproduces exactly what I am talking about. You can see log messages as column being dragged.

@DanailH
Copy link
Member

DanailH commented Sep 14, 2022

onColumnOrderChange fires event as column dragged over the other column(not dropped yet). If i drag my column over 10 columns, it will fire 10 events. I have not interest in those. I have no interest tying to filter or debounce them. I need to know when the column is dropped, in other words, user finished re-ordering. At this point i can save new column layout.

I think then we should change its behavior to match the one for onRowsOrderChange. I think we didn't do it so far because it will be a breaking change but we can do it now for v6.
@vbynda-gresham technically you can still use the onColumnOrderChange by introducing debounce.

@DanailH DanailH changed the title [question] How to use the columnHeaderDragEnd event? [DataGridPro] Update onColumnOrderChange behaviour to match onRowsOrderChange Sep 14, 2022
@DanailH DanailH mentioned this issue Sep 14, 2022
41 tasks
@DanailH DanailH self-assigned this Sep 14, 2022
@vbynda-gresham
Copy link
Author

onRowsOrderChange vs. onRowsOrderChanged does it make sense? Do you use a distinction to indicate 'with past tense' that the action is finished vs. in progress. Or maybe add onRowsOrderChangeEnd?
onRowsOrderChange is a good event name for the action that is in progress, maybe someone cares for it.

@alexfauquette
Copy link
Member

alexfauquette commented Sep 14, 2022

@alexfauquette Thank you for the demo codesandbox.io/s/eager-shamir-5grln1?file=/demo.tsx. It reproduces exactly what I am talking about. You can see log messages as column being dragged.

Yes, multiple "onColumnOrderChange", but only one "save the new dragging from x to y" (where to put the serve API except if x===y)

@vbynda-gresham
Copy link
Author

Pretty much what we are doing. I was hoping to avoid all this craft and use dedicated grid event that shows when column reorder is done.

@konrazem
Copy link

konrazem commented Sep 20, 2022

What I see in demo there is no event only defaultMuiPrevented info

 
      <DataGridPro
        columns={[{ field: "id" }, { field: "username" }, { field: "age" }]}
        onColumnOrderChange={(params, event, detials) => {
          // THERE IS NO EVENT TYPE "onRowsOrderChangeEnd". HERE event = { defaultMuiPrevented: false }. I AM NOT SURE WHAT IS THE USE OF THAT 
          console.log({ event });
        }}
        rows={rows}
      />
 

https://codesandbox.io/s/blissful-grass-cqolct?file=/demo.tsx:445-471

@colespencer1453
Copy link

To add to the discussion I find this prop pretty useless unless it emits the current ordering of all of the columns in the grid. I would like to cache and save user preferences as they reorder columns and it is difficult to track that from the params emitted from this event in addition to the issues mentioned above where all that we care about is the final drop position

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: data grid This is the name of the generic UI component, not the React module! feature: Reordering Related to the data grid Reordering feature support: commercial Support request from paid users
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants