10 Answers, 1 is accepted
RadTimeline for WPF does not support this out of the box, but you can use our DragDropManager to implement this behavior yourself. Please refer to the following online resources for additional information on our DragDropManager:
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Where can I find any example about draggable items in RadTimeline
Thank's In Advance
We do not have example that demonstrates drag/drop in the RadTimeline control. However, I prepared a sample project that demonstrates such implementation using the resources provided by Tsvetie. You can find it attached in my post, but keep in mind that this is only a proof of concept that is not well tested and I cannot state that this is the best implementation or that it will work properly in all possible cases. This is why I recommend you to use it only as a reference for your custom code.
I hope this is useful.
Thanks for your proof of concept, it help me to understand how DragAndDropManagerWorks. Now I have two issues that i will like you to help me:
1 - When I create (and set in the property ItemTemplateSelector of Timeline component) a CustomDataTemplateSelector for choose the style of items in the timeline, the selector works fine but I lose the DragAndDrop behavior. Is any thing to take into account ?.
2- The Drag And Drop behavior (without setting the ItemTemplateSelector) works well but when I make "ZoomIn" or "ZoomOut" in the time line and next drag and item, it drops in a different position that i want, It seems like the RADDragAndDropManager do not "recalculate" the Zoom or the coordinates taking in to account the new visualization. Any ideas about that ?
Let me get straight to your questions:
- When I create (and set in the property ItemTemplateSelector of Timeline component) a CustomDataTemplateSelector for choose the style of items in the timeline, the selector works fine but I lose the DragAndDrop behavior. Is any thing to take into account ?.
Indeed, the custom drag/drop logic won't work when you define a template for the timeline items. This is because when such template is used the timeline doesn't use the TimelineItemControl elements anymore, but instead replaces them with the element in the item template. So, in your case the drag/drop won't fire because the DragDropManager.AllowCaptureDrag attached property is not set on the elements in the template. Also, the DragInitialize event handler expects an element of type TimelineItemControl, but it won't get such. In order to run the custom drag behavior you will need to set the attached property to the element in the item template and slightly change the implementation in the DragInitialize handler. Here is an example:
- The Drag And Drop behavior (without setting the ItemTemplateSelector) works well but when I make "ZoomIn" or "ZoomOut" in the time line and next drag and item, it drops in a different position that i want, It seems like the RADDragAndDropManager do not "recalculate" the Zoom or the coordinates taking in to account the new visualization. Any ideas about that ?
I was not able to reproduce any unexpected behavior on my side - the drag and drop implementation works as expected. However, keep in mind currently the drop logic won't respect the top left position of the timeline item, but instead it will use the mouse position as a drop location. This might be the unexpected effect that you are experiencing. If you want to use the top left of the item as a drop position you will need to calculate it before pass it to the ConvertPointToDateTime() method. If this is not you case, can you please send me a drawings or a video that demonstrates the unexpected behavior. This way I will get better understanding for the issue.
I attach a project example to reproduce the Issues
1 - With the property
the itemTemplateSelector works fine. But now I identify that the template only is applied in Items with Duration. The "InstantItems" in the timeline doesn't take the template. (In the attached project i have commented the ItemTemplateSelector to reproduce the second issue).Also when I apply the ItemSelector, I'm losing the "selection" functionality and the "selectedITem" event doesn't fire
2- Effectively the drag drop implementation works fine, but if you do zoom out or zoom in and then drag an instant item, it takes a different position than the mouse is. I attached the project to reproduce it.
In the attached images the first image (Imagen1_1 .png) has the default zoom, in the second one ( Imagen2_2.png) I Drag And drop an Item Normally In the third ( Imagen3_3.png) I made Zoom Out and then Tried to drag and drop the InstantItem where the cursor is but the InstantItem takes another position (yellow selected).
3- How I can limit the area to drag and drop an InstantItem for exaple limit the Y axis and only drag in a X axis or "create" a rectangular area enable to drop items
PS: I tried to attach a project example but the forum only accepts images. Tell me if I can send you a dropbox link with the zip project if necessary
I will need some additional time to check out on your case and I will contact you as soon as there is more information on the matter.
Please excuse me for the delayed answer.
I tested the ItemTemplateSelector and it seems that it applies the data template correctly on both type of items - instant items and items with duration. Without your implementation I cannot be sure but my guess why the items are not displayed is that the element in the template doesn't have its Width set. When you define a DataTemplate for the items with duration you do not need to set a Width of the element because the time range determines it. On the other hand the instant items present a singularity in time and the elements in their data templates need to have its Width property set. Otherwise, they will be 0 pixels wide.
Please double check if the element in the DataTemplate for the instant timeline items have its Width property set.
About the instant items' issue, I was not able to recreate it on my side - the drag/drop action is executed properly even if I follow the steps from your reply. Can you please open a new support thread and attach your project there? This way I can test it on my side and investigate the reason behind the issue.
As for limiting the drag only in a specific axis or area you can add a condition that checks if the item is in a specific time frame and row. Here is an example:
If you want to limit the drag only on a specific axis - time or row - you can just the one of the properties - RowIndex or Date.
I hope this is useful.
Thank's for your answers.
1 -In relation with the ItemTemplateSelectorProperty I have added the Width propert and it works fine.
2- According your request I have created a ticket 951224 with the silverlight project to reproduce the issue.
3 - I'll try to test your suggestion of limit the drag & drop area.
I have another question about the ItemTemplate. When I add the ItemTemplate i'm losing the "selectedItem" event I mean it does not fire. But when I remove the template it works fine. What I can do
The missing selection is a limitation of the RadTimeline control that appears when a template for the timeline items is defined. In order to resolve this you can create a custom control that derives from the TimelineItemControl and place it in the data template for the timeline items. You can see this approach implemented in the First Look demo of RadTimeline.