Drag drop within a GridWiew

6 posts, 1 answers
  1. Kennet
    Kennet avatar
    104 posts
    Member since:
    Jun 2009

    Posted 05 Nov 2009 Link to this post

    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 { getset; }     
            public string Artist { getset; }     
            public string Title { getset; }     
        
        }     
     


    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" /> 
  2. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 11 Nov 2009 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 15 Nov 2009 Link to this post

    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.
  5. Kennet
    Kennet avatar
    104 posts
    Member since:
    Jun 2009

    Posted 15 Nov 2009 Link to this post

    Hi Miroslav,

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

    /Kennet
  6. Answer
    Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 15 Nov 2009 Link to this post

    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.
  7. Christophe
    Christophe avatar
    11 posts
    Member since:
    Sep 2009

    Posted 30 Dec 2009 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready