Comments (16)
@oliviertassinari Currently evaluating mui pro for a client project. Being able to perform dnd with the TreeView is a big part of the workflow. Tried the following:
<TreeItem
draggable
label="APP"
nodeId="1"
onDragStart={() => {
console.log("ondragStart");
}}
onDrag={() => {
console.log("onDrag");
}}
/>
The drag events are triggered with FireFox but not with Chrome/Edge. Is there a workaround to make this work?
from mui-x.
I would like to share a few learnings from the last couple of days of working on drag'n'drop and the MUI tree view:
I have created a sandbox based on this repo to illustrate my points.
The upper tree view in the sandbox uses a DraggableTreeItem
that takes care of drag'n'drop (useDrag
and what not) and wraps a MUI TreeItem
. As far as I can tell, this would be a fairly standard way to implement dragging a tree item out of a tree view; if I'm wrong there, I'd appreciate if someone could correct me.
The bottom tree view uses a DraggableCustomItem
that is identical to DraggableTreeItem
, but wraps the CustomItem
also used everywhere else in the app and is attached to the actual TreeItem
as its label
prop.
The two drop targets to the right are identical; a few sample CustomItem
s were already dropped in both.
The app in the sandbox suffers from issue mui/material-ui#29518: In Firefox, drag'n'drop works for both tree views; for Chrome or Safari, I am using the stopImmediatePropagation()
workaround from that issue to make the upper tree view work; I could not get the bottom one to work outside of Firefox so far.
A few things to note about the upper tree view:
- When dnd'ing an expanded item, the item is shown while dragging including all its children. Depending on the use case, this might make sense; IMO, it looks somewhat unusual. (related SO question)
- What worse IMO is that the tree item is shown while dragging - in its full (tree view) width, possibly including an icon to the left and some border to the right. There might be some way to mitigate that (CSS or so), but I don't have the required skills.
- My original intention was to make the tree view items look like those boxes in the drop targets (as is now done in the lower tree view) for some visual coherence. I tried real hard for quite a while to use the
ContentComponent
prop because (judging from its prominence in the docs) that seemed the way to go at first, but then I realized that approach requires me to do all the node expansion / collapsing / selection handling myself; I eventually gave up when it became just hopeless; related SO question.
My personal impression so far is that it might not be the best approach to try and make the TreeItem
itself dnd'able.
About the bottom tree:
- No matter if the item is expanded or collapsed or if it has any children, only the item itself is dnd'd.
- The item being dragged only has the size of itself, not full (tree view) width, no icons to the left, no border to the right.
- Using a custom component as tree item was a piece of cake - once I had realized I can use not only a string, but an entire component as
TreeItem
label
prop. Technically, the API docs do statenode
as type (notstring
or so) for that prop, butlabel
as a prop name IMO really leads a naive first time user (such as myself) to believe otherwise - and the description (The tree node label.) doesn't really help, either.
The drawback: As stated, the bottom tree currently only works in Firefox. Obviously unacceptable for a production app.
Also, I'm not much of a UI/UX guy, but IMHO, as a user, I would expect to drag only the item itself around, not an item of a tree view. Look at a tree view in macOS Finder or Windows Explorer: The "production" item object thingie I am working with when using an app that I - as a user - associate with for example a file or a folder doesn't have tree view icons to the left or some border to the right.
Finally, I have a few related questions that are probably too specific for StackOverflow, so asking here:
- What is the point of the
ContentComponent
prop in the first place when I can achieve the same result, to override the content component, much simpler using thelabel
prop ? Is it just to override the expansion/collapsing/selection behavior as in the example ? (BTW: It took me quite a while actually understand what that example actually does...) - Is there any way to get this
stopImmediatePropagation()
workaround to work forCustomItem
s ? I only have a fuzzy understanding of what it does and I have no clue why it works, but as it did the trick for Chrome withTreeItem
s, I tried to use it forCustomItem
s, but it seems I don't have the TypeScript skills to understand what's wrong and how to fix it, running into all sorts of typing issues and compiler errors. Is there at least a theoretical chance to make this work (e.g. by enabling the custom item to receive a ref of the corresponding type) ?
Could anyone kindly share some thoughts and possibly lend a hand in getting drag'n'drop to work ? It's not a major problem for my use case if the focus breaks or whatnot, but getting this to work in all major browsers would be mean huge progress for my current project.
Just my 2 cents. Thank you very much for your attention.
from mui-x.
What about using arborist and using MUI for the themed elements?
from mui-x.
Here is how I'm using react-dnd with TreeView: https://codesandbox.io/s/dawn-resonance-pgefk?file=/src/Demo.js
Could be useful to some
from mui-x.
Here is how I'm using react-dnd with TreeView: https://codesandbox.io/s/dawn-resonance-pgefk?file=/src/Demo.js
Could be useful to some
This is not working in any chromium browsers for me (95.0.4638.69). Only Firefox. Is it working for you @joziahg ?
from mui-x.
Hey @oliviertassinari thanks for the link! However, even though I may use this in the future, what I wanted now was a very simple behavior, like the native html drag n drop. I just wanted to add the draggable=true attribute to a TreeItem.
from mui-x.
@felipezacani What stops you from achieving it?
from mui-x.
@felipezacani What stops you from achieving it?
Not really sure if there is any other way of passing the attribute to the correct native item. I tried the same as I did successfuly with the Paper component, adding a "draggable={true}" to its tag, it doesn't work and its not passed down to any native component (checked on FirefoxDev inspector). I also noticed userSelect="none" has no effect on the TreeItems.
from mui-x.
@oliviertassinari problem was on my side, I had another component (mounted) using react-dnd. I'm still not sure why exactly, but if a react-dnd component is mounted, all other native draggable attributes are disabled (unless you use react-dnd in everything, of course). Thanks anyway!
from mui-x.
@oliviertassinari problem was on my side, I had another component (mounted) using react-dnd. I'm still not sure why exactly, but if a react-dnd component is mounted, all other native draggable attributes are disabled (unless you use react-dnd in everything, of course). Thanks anyway!
from mui-x.
Any new thoughts or progress on this front?
from mui-x.
Perhaps if we could use the prop for onFocus in TreeItem, we could trade off the keyboard navigation for dragging. My use case I need the drag and don't need the keyboard navigation.
The TreeItem uses the below function for onFocus, which breaks the drag with the prevent scroll. I have tried to turn this off using the TreeView prop onNodeFocus but that ends up in a loop...
from mui-x.
Here is how I'm using react-dnd with TreeView: https://codesandbox.io/s/dawn-resonance-pgefk?file=/src/Demo.js
Could be useful to someThis is not working in any chromium browsers for me (95.0.4638.69). Only Firefox. Is it working for you @joziahg ?
This is a known issue, you can follow it here mui/material-ui#29518
from mui-x.
Just wondering but TreeView is advertised in the MUI-X product, but I can't personally see any noticeable difference between the standard MUI and MUIX versions? Is this correct?
from mui-x.
Having an easy way of using drag and drop in TreeView would also mean a lot for our business.
from mui-x.
Bumping this, also using arborist under the hood would be great 🤩
from mui-x.
Related Issues (20)
- mui X date and time picker HOT 1
- MUI-X Data-grid export issues (pagination, img format, optimization) HOT 2
- [question] Tree Data: How to switch between tree data and ordinary grid without tree data HOT 5
- [pickers] Date/DateTime/Time Picker Functionality Issues Post v5->v6 Upgrade HOT 5
- Avoid making popovers go offscreen for x-data-grid HOT 3
- No row with id #undefined found HOT 9
- [charts] series not drawing since v6.0.0-alpha.8 HOT 13
- [question] How to revert from custom edit cell back to default edit cell? HOT 2
- Error when Clicking Last Row Hyperlink in DataGrid Premium with Pagination HOT 1
- Synchronization of DataGrid Operations Across Multiple Instances HOT 2
- [docs] Demo LazyLoadingGrid crashes HOT 3
- [question] Add another button in GridColumnsPanel HOT 1
- [TreeView] NPM error while installation HOT 1
- Issue when exporting (print) while using server side pagination - Data grid
- Get error when using customized filter in header filter HOT 1
- [MUIX Data Grid] Style Data Grid Footer Rows Per Page Menu Background and Text Color HOT 1
- [pickers] Datepicker with html5 validation HOT 2
- [Datagrid] Focused cell causes row to shift by 1px if showCellVerticalBorder is enabled HOT 3
- [pickers] The field does not work when the format is only composed of escaped characters HOT 4
- DataGrid loading spinner collapses to almost nothing between pages HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.