Drop to a DataGridRow

[bfeltz]

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.

[Miroslav]

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.

[Kamlesh]

Can we drag muiltple datagirdrows into another control like TreeView?

[Miroslav]

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.

[Kamlesh]

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

[Miroslav]

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.

[Kamlesh]

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

Thanks & Regards,
Kamlesh

[Kamlesh]

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

[Miroslav]

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.

[GEB]

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?

 

[Bobi]

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.

[MIguel Andres]

Hi can you updte the example using the Radgridview control
Tks

[Valentin.Stoychev]

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.

[Srinivas]

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

[Valentin.Stoychev]

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.

[Jiri]

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

[Nick]

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

 

 

[Jiri]

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