Drop to a DataGridRow in UI for Silverlight

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

Drop to a DataGridRow

17 Answers 410 Views

DragAndDrop

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

17 Answers, 1 is accepted

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.

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.

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.

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

answered on 03 Dec 2008, 03:37 PM

RadDragDrop_Help_First_Draft.zip

DragDropGridToTreeView.zip

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.