Drag between TileViews and drop TileViewItem in middle of target collection.

2 posts, 0 answers
  1. Greg
    Greg avatar
    33 posts
    Member since:
    Oct 2007

    Posted 07 Oct 2014 Link to this post

    I would like to know if it is possible to drag a TileViewItem from one TileView to another and drop the dragged TileViewItem in the middle of the collection of the second TileView's items. (I am using MVVM with ObservableCollections populating both tileviews, using DragDropManager for dragging.)

    In other words - how do I determine what TileViewItem in the second TileView is the target of the drop action?

    Example: TileView 1 has 10 items, TileView2 has 20 items. I want to drag TileView1 position #5 to TIleView2 position # 12.

    All the examples I found on the forum demonstrate dropping the TileViewItem in the last position of the target TileView - that's easy.

    Thanks in advance.
  2. Martin Ivanov
    Martin Ivanov avatar
    1442 posts

    Posted 08 Oct 2014 Link to this post

    Hi Greg,

    To determine the RadTileViewItem under the mouse (the drop target) you can use the e.OriginalSource of the drop event arguments and then get its RadTileViewItem parent with the ParentOfType<T>() extension method.

    private void OnTileViewDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
        var originalSource = e.OriginalSource as FrameworkElement;
        var dropTarget = originalSource.ParentOfType<RadTileViewItem>();   
    In this case the OriginalSource property contains the element that is directly under the mouse which is a child of the hovered tile view item.

    Then based on the drop target you can insert the item in your collection. However, keep in mind that when you reorder the items in the tileview with drag, they are not reordered in the original collection. This is why when you add an item after reorder its position might not be correct. To resolve this you can create a Position property in your view model and bind it two way to the Position property of the RadTileViewItems. Then when you insert the item you can also set its position.

    For your convenience I prepared a sample project demonstrating this approach. Please give it a try and let me know if it helps.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top