Drop to a DataGridRow

18 posts, 0 answers
  1. bfeltz
    bfeltz avatar
    4 posts
    Member since:
    May 2007

    Posted 15 Oct 2008 Link to this post

    Is it possible to drop to a DataGridRow. Dropping to a DataGrid works fine but I can't figure out how to determine which row the mouse is over.

  2. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 16 Oct 2008 Link to this post

    Hi Ben,

    Yes, it is possible to drop on a grid, as it would be possible to drag it.

    I tried with a very simple proof-of-concept drop implementation. Of course you will need to do the full validation, but this may be enough to get you started.

    The problem of course is getting the GridRowItems. They can be accessed via the LoadingRow event or override.

    public partial class DataGridDragDrop : UserControl  
        {  
            ObservableCollection<String> allRows;  
     
            public DataGridDragDrop()  
            {  
                InitializeComponent();  
     
                Loaded += new RoutedEventHandler(DataGridDragDrop_Loaded);  
     
                dataGrid.LoadingRow += new EventHandler<DataGridRowEventArgs>(dataGrid_LoadingRow);  
     
                this.AddHandler(RadDragAndDropManager.DragQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDragQuery));  
                this.AddHandler(RadDragAndDropManager.DropQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDropQuery));  
                this.AddHandler(RadDragAndDropManager.DropInfoEvent, new EventHandler<DragDropEventArgs>(OnDropInfo));  
            }  
     
            void dataGrid_LoadingRow(object sender, DataGridRowEventArgs e)  
            {  
                RadDragAndDropManager.SetAllowDrop(e.Row, true);  
            }  
     
            private void OnDragQuery(object sender, DragDropQueryEventArgs e)  
            {  
                if (e.Options.Status == DragStatus.DragQuery)  
                {  
                    e.QueryResult = true;  
                    e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();  
                    var dragCue = RadDragAndDropManager.GenerateVisualCue(null);  
                    ContentControl source = e.Options.Source as ContentControl;  
                    dragCue.Content = source.Content;  
                    e.Options.Payload = dragCue.Content;  
                    e.Options.DragCue = dragCue;  
                }  
     
                if (e.Options.Status == DragStatus.DropSourceQuery)  
                {  
                    e.QueryResult = true;  
                }  
            }  
     
            private void OnDropQuery(object sender, DragDropQueryEventArgs e)  
            {  
                if (e.Options.Status == DragStatus.DropDestinationQuery)  
                {  
                    e.QueryResult = true;  
                }  
            }  
     
            private void OnDropInfo(object sender, DragDropEventArgs e)  
            {  
                if (e.Options.Status == DragStatus.DropComplete)  
                {  
                    DataGridRow dataRow = e.Options.Destination as DataGridRow;  
     
                    var index = dataRow.GetIndex();  
                    allRows.RemoveAt(index);  
                    allRows.Insert(index, e.Options.Payload as String);  
                }  
            }  
     
            void DataGridDragDrop_Loaded(object sender, RoutedEventArgs e)  
            {  
                allRows = new ObservableCollection<string>();  
                Enumerable.Range(0, 100).Select(num => String.Format("Item {0}", num)).ToList().ForEach(str => allRows.Add(str));  
                dataGrid.ItemsSource = allRows;  
            }  
        } 

    And the simple xaml:

    <Grid x:Name="LayoutRoot">  
        <Grid.RowDefinitions> 
            <RowDefinition Height="*" /> 
            <RowDefinition Height="200" /> 
        </Grid.RowDefinitions> 
        <data:DataGrid x:Name="dataGrid" /> 
     
        <StackPanel Grid.Row="1">  
            <ContentControl Background="Yellow" 
                            Content="Drag This Item" 
                            Padding="20" dragDrop:RadDragAndDropManager.AllowDrag="True" /> 
        </StackPanel> 
    </Grid> 
     

    Does this work for you?

    Kind regards,
    Miroslav
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft banner
  4. Kamlesh
    Kamlesh avatar
    12 posts
    Member since:
    Nov 2008

    Posted 28 Nov 2008 Link to this post

    Can we drag muiltple datagirdrows into another control like TreeView?
  5. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 02 Dec 2008 Link to this post

    Hi Kamlesh,

    Currently you can drag/drop items form the DataGrid to a Tree View, please look at the sample code:

    The xaml:

    <nav:RadTreeView x:Name="treeView">  
        <nav:RadTreeView.ItemContainerStyle> 
            <Style TargetType="nav:RadTreeViewItem">  
                <Setter Property="dragDrop:RadDragAndDropManager.AllowDrop" Value="True" /> 
                <Setter Property="Foreground" Value="Red" /> 
            </Style> 
        </nav:RadTreeView.ItemContainerStyle> 
    </nav:RadTreeView> 
     
    <data:DataGrid x:Name="dataGrid" Grid.Column="1">  
        <data:DataGrid.RowStyle> 
            <Style TargetType="data:DataGridRow">  
                <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" /> 
            </Style> 
        </data:DataGrid.RowStyle> 
    </data:DataGrid> 
     


    and the code:

    public DragDropGridToTree()  
    {  
        InitializeComponent();  
     
        treeView.ItemsSource = Enumerable.Range(1, 10).Select(num => String.Format("Item {0}", num));  
        dataGrid.ItemsSource = Enumerable.Range(1, 10).Select(num => String.Format("Grid Item {0}", num));  
        dataGrid.AddHandler(RadDragAndDropManager.DragQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDragQuery));  
    }  
     
    private void OnDragQuery(object sender, DragDropQueryEventArgs e)  
    {  
        if (e.Options.Status == DragStatus.DragQuery)  
        {  
            e.QueryResult = true;  
            e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();  
     
            var dragCue = RadDragAndDropManager.GenerateVisualCue(null);  
            var dataGrid = sender as DataGrid;  
            var items = dataGrid.SelectedItems.Cast<String>().ToList();  
     
            e.Options.Payload = items;  
            dragCue.Content = String.Join("\n", items.ToArray());  
            e.Options.DragCue = dragCue;  
        }  


    Unfortunately, the DataGrid will change the selection on MouseDown and the experience may not be what you expect. This means that on a mouse down event it wil always select the row beneath the mouse. So the drag/drop will always occur with 1 row.

    You can compare this to the grid in Windows Explorer for example where when multiple items are selected, pressing the mouse on one of them does not deselect the others (but releasing it does).

    I am not aware of a way to change the behavior of the DataGrid.

    Greetings,
    Miroslav
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Kamlesh
    Kamlesh avatar
    12 posts
    Member since:
    Nov 2008

    Posted 02 Dec 2008 Link to this post

    I am not able to get the property AllowDrag and AllowDrop in RadDragAndDropManager.

    I have inculde xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop" in the Xaml file.

    How to get these properties

    Thanks
    Kamlesh

  7. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 02 Dec 2008 Link to this post

    Hi Kamlesh,

    The assembly needs to be specified in the xml namespace:

    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
    xmlns:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" 
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
    xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls" 


    The assembly name can be omitted only if the clr namespace is in the same project, though it is best to put it even in that case.

    Sincerely yours,
    Miroslav
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Kamlesh
    Kamlesh avatar
    12 posts
    Member since:
    Nov 2008

    Posted 02 Dec 2008 Link to this post

    You can have multiple row dragging from Datagird with CTRL + Shift keys pressed

    Thanks & Regards,
    Kamlesh

  9. Kamlesh
    Kamlesh avatar
    12 posts
    Member since:
    Nov 2008

    Posted 02 Dec 2008 Link to this post

    Thank You  very much for this solution I was expecting the same. Great!
    :)

    I have some more queries:-

    1. While dragging on Treeview it should expand the tree node. How can we do that?
    2. On which event i will get the node were item is dropped?
            For this i have tried
                 
    radTreeView.AddHandler(RadDragAndDropManager.DropInfoEvent,  new EventHandler<DragDropEventArgs>(OnDropInfo));    
     private void OnDropInfo(object sender, DragDropEventArgs e)  
            {  
                if (e.Options.Status == DragStatus.DropComplete)  
                {  
                    MessageBox.Show("DropComplete");  
                }  
            } 
    But OnDropInfo is not never called.

    Thanks
  10. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 03 Dec 2008 Link to this post

    Hi Kamlesh,

    The Drag&Drop uses routed events which are quite powerful and allow you to handle events at object for which you do not have a direct reference.

    You can use a class handler to add a handler for the DragQuery event for all TreeViewItems, so they will expand whenever someone wants to drop something in them.

    Here is the code for adding the class event:

    static DragDropGridToTree()  
    {  
        EventManager.RegisterClassHandler(typeof(RadTreeViewItem), RadDragAndDropManager.DropQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnTreeViewItemDropQuery));  
    }  
     
    private static void OnTreeViewItemDropQuery(object sender, DragDropQueryEventArgs e)  
    {  
        var treeViewItem = sender as RadTreeViewItem;  
        if (treeViewItem != null)  
        {  
            treeViewItem.IsExpanded = true;  
        }  


    You first need to accept the drop operation, this happens by handling the DropQuery event. There the TreeView says "Yes, I accept the drop" and after the source is asked as well, (and user has not canceled the drag/drop) the tree view will receive notification for a successful drop.

    I have attached the project from my previous post with the auto-expand and the Query events hooked. It is a more real-world example where the TreeView has different types as items (Organizations & People), everything is databound.

    You can also have a look at the draft version for the DragDrop help which I have also included.

    Greetings,
    Miroslav
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  11. GEB
    GEB avatar
    228 posts
    Member since:
    Dec 2008

    Posted 01 Feb 2009 Link to this post

    I am using RadGridView, and do not see a LoadingRow event.  How do I tell which row is being dropped into on a RadGridView as opposed to a DataGrid?

     

  12. Bobi
    Admin
    Bobi avatar
    513 posts

    Posted 06 Feb 2009 Link to this post

    Hi GEB,

    Thank you for your question.

    In our next release of RadGridView we will have RowLoaded event which will be raised when a row is loaded as well as some additional events and improvements. The next release is due in March. 

    I hope this timeframe is acceptable for you. 

    Kind regards,
    Boryana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  13. MIguel Andres
    MIguel Andres avatar
    1 posts
    Member since:
    Dec 2008

    Posted 29 Mar 2009 Link to this post

    Hi can you updte the example using the Radgridview control
    Tks
  14. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 06 Apr 2009 Link to this post

    Hi MIguel Andres,

    Yes - we are working on that and it will be available soon.

    Regards,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  15. Srinivas
    Srinivas avatar
    48 posts
    Member since:
    May 2009

    Posted 17 Jun 2009 Link to this post

    Hi,

    Do you have any simple sample project on RadGridView to List? I am populating RadGridView with object having 10 fields and I would like to drag row from RadGridView to a simple List. The resulted list will have values of two concatinated fields from the RadGridView.

    Can you please send me the sample as soon as possible? I really appreciate your help on this.

    Thanks
    Srinivas
  16. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 22 Jun 2009 Link to this post

    Hello Srinivas,

    Do you mean an example for dragging a gridview row to a ListBox?

    Best wishes,
    Valentin.Stoychev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  17. Jiri
    Jiri avatar
    40 posts
    Member since:
    Oct 2013

    Posted 02 Feb 2015 in reply to Valentin.Stoychev Link to this post

    Hi,

    I have scenario with standard DataGrid and DragDropManager from newer telerik version and would need to determine target row of Drop. Could someone please show example how to do it?

    Thank you,
    Jiri
  18. Nick
    Admin
    Nick avatar
    593 posts

    Posted 03 Feb 2015 Link to this post

    Hi Jiri,

    You can check our Tree to Grid drag drop example. To find the Target row you can use the eventArgs in the DragOver event:
    var row = e.OriginalSource as GridViewRow ?? (e.OriginalSource as FrameworkElement).ParentOfType<GridViewRow>();

    Hope this helps. 

    Regards,
    Nick
    Telerik
     

    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.

     
  19. Jiri
    Jiri avatar
    40 posts
    Member since:
    Oct 2013

    Posted 09 Feb 2015 in reply to Nick Link to this post

    Hi Nick,

    Thank you for your support, I was able to make it work and it works great now.

    I would only remark, that I would expect more fluent API - for example I was little bit missing an info about destination place in OnDrop handler and even support of Rx Framework's Observable.FromEvent pattern would be nice.

    Cheers,
    Jiri
Back to Top
DevCraft banner