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

Drop to a DataGridRow

17 Answers 562 Views
DragAndDrop
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
bfeltz
Top achievements
Rank 1
bfeltz asked on 15 Oct 2008, 09:20 PM
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.

17 Answers, 1 is accepted

Sort by
0
Miroslav
Telerik team
answered on 16 Oct 2008, 01:24 PM
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.
0
Kamlesh
Top achievements
Rank 1
answered on 28 Nov 2008, 04:09 PM
Can we drag muiltple datagirdrows into another control like TreeView?
0
Miroslav
Telerik team
answered on 02 Dec 2008, 11:46 AM
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.
0
Kamlesh
Top achievements
Rank 1
answered on 02 Dec 2008, 02:56 PM

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

0
Miroslav
Telerik team
answered on 02 Dec 2008, 03:08 PM
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.
0
Kamlesh
Top achievements
Rank 1
answered on 02 Dec 2008, 03:26 PM
You can have multiple row dragging from Datagird with CTRL + Shift keys pressed

Thanks & Regards,
Kamlesh

0
Kamlesh
Top achievements
Rank 1
answered on 02 Dec 2008, 03:52 PM
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
0
Miroslav
Telerik team
answered on 03 Dec 2008, 03:37 PM
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.
0
GEB
Top achievements
Rank 1
answered on 02 Feb 2009, 03:34 AM

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?

 

0
Bobi
Telerik team
answered on 06 Feb 2009, 02:20 PM
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.
0
MIguel Andres
Top achievements
Rank 1
answered on 29 Mar 2009, 08:30 PM
Hi can you updte the example using the Radgridview control
Tks
0
Valentin.Stoychev
Telerik team
answered on 06 Apr 2009, 09:11 AM
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.
0
Srinivas
Top achievements
Rank 1
answered on 17 Jun 2009, 10:26 AM
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
0
Valentin.Stoychev
Telerik team
answered on 22 Jun 2009, 03:25 PM
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.
0
Jiri
Top achievements
Rank 1
answered on 02 Feb 2015, 07:06 PM
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
0
Nick
Telerik team
answered on 03 Feb 2015, 08:28 AM
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.

 
0
Jiri
Top achievements
Rank 1
answered on 09 Feb 2015, 09:09 AM
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
Tags
DragAndDrop
Asked by
bfeltz
Top achievements
Rank 1
Answers by
Miroslav
Telerik team
Kamlesh
Top achievements
Rank 1
GEB
Top achievements
Rank 1
Bobi
Telerik team
MIguel Andres
Top achievements
Rank 1
Valentin.Stoychev
Telerik team
Srinivas
Top achievements
Rank 1
Jiri
Top achievements
Rank 1
Nick
Telerik team
Share this question
or