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

Drag & Drop

10 Answers 198 Views
TimeLine
This is a migrated thread and some comments may be shown as answers.
Jordi
Top achievements
Rank 1
Jordi asked on 26 Jul 2013, 07:15 AM
Hi, I'm using MVVM pattern to work with RadTimeLine. The project works fine, but, is posible to use drag and drop for move items into RadTimeLine?

Thank you!

Jordi

10 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 30 Jul 2013, 02:25 PM
Hello Jordi,

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:

Regards,
Tsvetie
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
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 >>
0
Manuel
Top achievements
Rank 1
answered on 16 Jun 2015, 10:00 PM

Where can I find any example about draggable items in RadTimeline 

 

Thank's In Advance

0
Martin Ivanov
Telerik team
answered on 18 Jun 2015, 01:07 PM
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
0
Manuel
Top achievements
Rank 1
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

 

 

0
Martin Ivanov
Telerik team
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
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
0
Manuel
Top achievements
Rank 1
answered on 24 Jun 2015, 07:07 PM

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

0
Martin Ivanov
Telerik team
answered on 29 Jun 2015, 03:31 PM
Hi Manuel,

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.

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
0
Martin Ivanov
Telerik team
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
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
0
Manuel
Top achievements
Rank 1
answered on 08 Jul 2015, 12:51 PM

Hi Martin

 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 

0
Martin Ivanov
Telerik team
answered on 09 Jul 2015, 03:41 PM
Hi Manuel,

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.

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
Tags
TimeLine
Asked by
Jordi
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Manuel
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or