This is a migrated thread and some comments may be shown as answers.

Drag & Drop

10 Answers 226 Views

TimeLine

This is a migrated thread and some comments may be shown as answers.

10 Answers, 1 is accepted

answered on 18 Jun 2015, 01:07 PM

Timeline-WPF-DragDropItems.rar

Hi Manuel,

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.

Regards,
Martin
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 22 Jun 2015, 01:43 PM

Hi Martin

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 ?

Regards

answered on 24 Jun 2015, 10:13 AM

Hello Manuel,

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:

<DataTemplate x:Key="timelineItemTemplate">

    <Rectangle Fill="Red" Height="10" telerik:DragDropManager.AllowCapturedDrag="True" />

</DataTemplate>

private void OnTimelineDragInitialize(object sender, DragInitializeEventArgs e)

{

    var itemControl = e.OriginalSource as FrameworkElement;

    if (itemControl != null)

    {

        // drag initialize logic here

    }
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 hope this information helps.

Regards,
Martin
Telerik

answered on 24 Jun 2015, 07:07 PM

imagen1_1.png

imagen2_2.png

imagen3_3.png

Hello Martin,

I attach a project example to reproduce the Issues

1 - With the property
telerik:DragDropManager.AllowCapturedDrag="True"
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

Regards

answered on 03 Jul 2015, 02:17 PM

Hello Manuel,

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:

private void OnTimelineDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)

{

var mousePos = e.GetPosition(this.timeline);

int rowUnderMouse = GetRowUnderMouse(mousePos);

DateTime dateTimeUnderMouse = this.timeline.ConvertPointToDateTime(mousePos);

var dataItem = DragDropPayloadManager.GetDataFromObject(e.Data, "DraggedItem") as DataItem;

if (dateTimeUnderMouse is in the specific time frame and the row index is in the index range)

{

dataItem.RowIndex = rowUnderMouse;

dataItem.Date = dateTimeUnderMouse;

}

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.

Regards,
Martin
Telerik