Drag drop within a GridWiew

[Kennet]

I have to grid views (one is my medialibrary and one for a playlist). I want to drag songs from the "medialibrary" to the "playlist", I aslo need to be adle to insert anywhere on the "playlist" grid when I drag from "medialib".

Also need to dragdrop within the "playlist" so I can change place on the songs in the "playlist".

Now I only get drag from "medialib" to "playlist" work sort of, and the tooltip looks funny.

Help!

C#

ObservableCollection<Song> _mediaLib;
ObservableCollection<Song> _playlist;


private void InitGrids()
        {
            _mediaLib = new ObservableCollection<Song>();
            _playlist = new ObservableCollection<Song>();

            radGridViewMediaLib.ItemsSource = _mediaLib;
            radGridViewPlaylist.ItemsSource = _playlist;

            RadDragAndDropManager.AddDropQueryHandler(radGridViewMediaLib, OnDropQuery);
            RadDragAndDropManager.AddDropQueryHandler(radGridViewPlaylist, OnDropQuery);

            RadDragAndDropManager.AddDragQueryHandler(radGridViewMediaLib, OnOrderDragQuery);
            RadDragAndDropManager.AddDragQueryHandler(radGridViewPlaylist, OnOrderDragQuery);

            RadDragAndDropManager.AddDragInfoHandler(radGridViewMediaLib, OnOrderDragInfo);
            RadDragAndDropManager.AddDragInfoHandler(radGridViewPlaylist, OnOrderDragInfo);
        }


#region DragDrop

        private void OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            // We allow drop only if the dragged items are products:
            ICollection draggedItems = e.Options.Payload as ICollection;
            bool result = draggedItems.Cast<object>().All((object item) => item is Song);
            e.QueryResult = result;
            e.Handled = true;

            // Note that here we agree to accept a drop. We will be notified
            // in the DropInfo event whether a drop is actually possible.
        }

        private void OnOrderDragQuery(object sender, DragDropQueryEventArgs e)
        {
            RadGridView gridView = sender as RadGridView;
            if (gridView != null)
            {
                IList selectedItems = gridView.SelectedItems.ToList();
                e.QueryResult = selectedItems.Count > 0;
                e.Options.Payload = selectedItems;
            }

            e.QueryResult = true;
            e.Handled = true;
        }

        private void OnOrderDragInfo(object sender, DragDropEventArgs e)
        {
            RadGridView gridView = sender as RadGridView;
            IEnumerable draggedItems = e.Options.Payload as IEnumerable;

            if (e.Options.Status == DragStatus.DragInProgress)
            {
                //Set up a drag cue:
                TreeViewDragCue cue = new TreeViewDragCue();
                //Here we need to choose a template for the items:
                cue.ItemTemplate = this.Resources["Song"] as DataTemplate;
                cue.ItemsSource = draggedItems;
                e.Options.DragCue = cue;
            }
            else if (e.Options.Status == DragStatus.DragComplete)
            {
                IList source = gridView.ItemsSource as IList;
                foreach (object draggedItem in draggedItems)
                {
                    _playlist.Add((Song)draggedItem);
                }
            }
        }

        #endregion


private ObservableCollection<Song> GetSongs(int count)
        {
            ObservableCollection<Song> _sList = new ObservableCollection<Song>();

            for (int i = 0; i < count; i++)
            {
                Song _s = new Song();
                _s.Artist = "Artist " + i.ToString();
                _s.Title = "Title " + i.ToString();
                _s.GUID = Guid.NewGuid();
                _sList.Add(_s);
            }


            return _sList;
        }


//Song class
public class Song
    {
        public Song()
        {

        }

        public Guid GUID { get; set; }
        public string Artist { get; set; }
        public string Title { get; set; }

    }

WPF:

<Window.Resources>
        <Style TargetType="gridViewElements:GridViewRow" x:Key="OrderItemStyle">
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" />
        </Style>

        <LinearGradientBrush x:Key="DropPossibleBackground" StartPoint="0 0" EndPoint="0 1">
            <GradientStop Offset="0" Color="White" />
            <GradientStop Offset="1" Color="#FFE699" />
        </LinearGradientBrush>

    </Window.Resources>

<telerik:RadGridView Height="762" Margin="12,42,571,-42" Name="radGridViewMediaLib" Width="595" HorizontalAlignment="Left"
                             IsReadOnly="True" dragDrop:RadDragAndDropManager.AllowDrop="True"
                        RowStyle="{StaticResource OrderItemStyle}" Background="White"
                        CanUserFreezeColumns="False" CanUserInsertRows="False"
                        ShowGroupPanel="False" />


        <telerik:RadGridView Height="762" Margin="0,50,64,-50" Name="radGridViewPlaylist" Width="480" HorizontalAlignment="Right"
                             IsReadOnly="True" dragDrop:RadDragAndDropManager.AllowDrop="True"
                        RowStyle="{StaticResource OrderItemStyle}" Background="White"
                        CanUserFreezeColumns="False" CanUserInsertRows="False"
                        ShowGroupPanel="False" />

[Miroslav]

Hello Kennet,

I will prepare an example for DragDrop between DataGrids with the 2009.3 1103 versuin and I will post it here once it is ready.

Kind regards,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Miroslav]

Hi Kennet,

I modified an example we had so that it now contains two grids and it supports drag-drop between them. It contains WPF and Silverlight versions.

The two GridViews seem very similar to the playlist / library you are referring to.

The difference between this one and previous examples I have posted is the template of the GridView. Also the GridView now captures the mouse, so a ReleaseMouseCapture() needs to be called when dragging from the grid.

Is this example helpful for you?

All the best,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kennet]

Hi Miroslav,

WPF example is missing in the zip file. But Silverligt example works great. Just as I need to get going.

/Kennet

[Miroslav]

Hello Kennet,

It seems that I did not select the WPF example as I was .zipping the folders. My bad.

The WPF example is included in this archive, it is called "GridViewDragReorder".

Thanks for pointing out the omission.

Best wishes,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Christophe]

Hello,
This seam to be what I'm looking for.
But it does'nt work for me becase I'm in version 2009.2.812.1030.
Could you send a sample please with this version ?
thanks
Christophe