chore(TreeView): add KB for drag to a custom target #2585
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ntacheva
added
the
merge-to-production
|
Hello @ntacheva, Check the below option if you would like to automatically generate PR to production. The automation uses the branch for the cherry-pick, and then will delete the branch. Please, do not delete it manually.
|
dimodi
reviewed
Nov 29, 2024
dimodi
reviewed
Nov 29, 2024
dimodi
reviewed
Nov 29, 2024
dimodi
reviewed
Nov 29, 2024
dimodi
approved these changes
Nov 29, 2024
ntacheva
commented
Nov 29, 2024
|
Here you are the link to your PR to production: 2591 |
ikoevska
reviewed
Dec 4, 2024
| @@ -0,0 +1,206 @@ | |||
| --- | |||
| title: Drag TreeView Items to a Custom Target | |||
| description: How to support draging and reordering items inside the TreeView but also allow dragging and dropping items outside the component to a custom target | |||
There was a problem hiding this comment.
Suggested change
| description: How to support draging and reordering items inside the TreeView but also allow dragging and dropping items outside the component to a custom target | |
| description: How to support dragging and reordering items inside the TreeView but also allow dragging and dropping items outside the component to a custom target. |
|
|
||
| ## Description | ||
|
|
||
| I have a TreeView that allows dragging and reordering items inside the component. I want to also allow dragging items outside the TreeView, so the users can drop them on custom target. How to achieve that? |
There was a problem hiding this comment.
Suggested change
| I have a TreeView that allows dragging and reordering items inside the component. I want to also allow dragging items outside the TreeView, so the users can drop them on custom target. How to achieve that? | |
| I have a TreeView that allows dragging and reordering items inside the component. I want to also allow dragging items outside the TreeView, so the users can drop them on a custom target. How to achieve that? |
| To allow dragging outside the TreeView and dropping on a custom target, follow these steps: | ||
|
|
||
| 1. Handle the [`OnDragStart`]({%slug treeview-events%}#drag-events) event of the TreeView to get the item that the user started dragging. | ||
| 1. Handle the [`@onpointerup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event) event of your custom target to add the TreeView inside as needed. Based on product specifics, the TreeView internally does not use draggable events, it uses pointer events to handle the dragging. Therefore, `@ondrop` of your custom target will not fire when dragging a TreeView item in it as the component expects a subsequent pointer event. Use the `@onpointerup` instead of `@ondrop`. |
There was a problem hiding this comment.
Ideally, external links should open in a new window with the <a href="" target="_blank"> syntax.
| 1. Handle the [`OnDragStart`]({%slug treeview-events%}#drag-events) event of the TreeView to get the item that the user started dragging. | ||
| 1. Handle the [`@onpointerup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event) event of your custom target to add the TreeView inside as needed. Based on product specifics, the TreeView internally does not use draggable events, it uses pointer events to handle the dragging. Therefore, `@ondrop` of your custom target will not fire when dragging a TreeView item in it as the component expects a subsequent pointer event. Use the `@onpointerup` instead of `@ondrop`. | ||
| 1. Change the icon in the drag clue when the user drags over the custom target to indicate it is an allowed target. Once the [Drag Clue Template](https://feedback.telerik.com/blazor/1501043-drag-clue-template) is available, you may use it to change the rendering as needed. At the time of writing, changing the icon is only possible with CSS. For that purpose: | ||
| 1. Handle [`@onpointerenter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event) and [`@onpointerout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) events of the custom target to detect when the user drags the item over it. |
There was a problem hiding this comment.
Suggested change
| 1. Handle [`@onpointerenter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event) and [`@onpointerout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) events of the custom target to detect when the user drags the item over it. | |
| 1. Handle the [`@onpointerenter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event) and [`@onpointerout`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) events of the custom target to detect when the user drags the item over it. |
| 1. Raise and drop a flag based on the pointer position. | ||
| 1. Conditionally apply custom CSS to change the drop clue icon based on the flag. | ||
|
|
||
| >caption Draggable Treeview that allows dropping items in a custom target |
There was a problem hiding this comment.
Suggested change
| >caption Draggable Treeview that allows dropping items in a custom target | |
| >caption Draggable Treeview that allows dropping items in a custom target |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.