Drag rows from one GridView into another GridView in Silverlight 4

[Joshua]

Hello,

I have two GridViews that are side by side and I need to drag a row from one into the other. I have commands that I've tested with buttons that successfully move an item from one grid to another.

Here is the scenario
I am building a custom control that shows a list of available options and allows you to select them. Once they are selected, they are moved out of one grid and placed in the other. The grids are both bound to a collection. One grid is bound to an available list of items, and the other is bound to a list of selected items.

When an Item is selected, it is removed from the available collection and placed into the selected collection.

Everything is working as it should, but I need to add drag and drop functionality to these grids to move the data back and forth between them. Are there any code samples that will show an example of how to do this? I'm not sure what I need to do to accomplish this.

<Style TargetType="telerik:GridViewRow" x:Key="draggedRowStyle">
        <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
</Style>

<telerik:RadGridView x:Name="AvailableGrid" Grid.Column="0" Grid.Row="1" ItemsSource="{TemplateBinding AvailableItems}" AllowDrop="True" RowStyle="{StaticResource draggedRowStyle}" ShowGroupPanel="False" RowIndicatorVisibility="Collapsed"/>

<telerik:RadGridView x:Name="SelectedGrid" Grid.Column="2" Grid.Row="1" ItemsSource="{TemplateBinding SelectedItems}" AllowDrop="True" RowStyle="{StaticResource draggedRowStyle}" ShowGroupPanel="False" RowIndicatorVisibility="Collapsed" />

Thanks
Josh

[Joshua]

I was able to get the drag and drop function to work using the code that I posted above, and adding to the code for the control.

All I had to add to the code for the control was the following

private void ConfigureDragDropOperations()
{
    var availableItemsGrid = (RadGridView)GetTemplateChild("AvailableGrid");
    var selectedItemsGrid = (RadGridView)GetTemplateChild("SelectedGrid");

    DragDropManager.AddDragInitializeHandler(availableItemsGrid, DragAvailableItem);
    DragDropManager.AddDragInitializeHandler(selectedItemsGrid, DragSelectedItem);

    DragDropManager.AddDropHandler(availableItemsGrid, DropSelectedItemToAvailableItems);
    DragDropManager.AddDropHandler(selectedItemsGrid, DropAvailableItemToSelectedItems);
}

#region DRAG AND DROP HANDLERS

public void DragAvailableItem(object sender, Telerik.Windows.DragDrop.DragInitializeEventArgs e)
{
    e.AllowedEffects = DragDropEffects.All;
}

public void DragSelectedItem(object sender, Telerik.Windows.DragDrop.DragInitializeEventArgs e)
{
    e.AllowedEffects = DragDropEffects.All;
}

public void DropAvailableItemToSelectedItems(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
{
    GridViewRow droppedItem;

    if (e.Data.GetType() == typeof(GridViewRow))
    {
        droppedItem = (GridViewRow)e.Data;
        if (SelectItemCommand != null)
            SelectItemCommand.Execute(droppedItem.Item);
    }
}

public void DropSelectedItemToAvailableItems(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
{
    GridViewRow droppedItem;

    if (e.Data.GetType() == typeof(GridViewRow))
    {
        droppedItem = (GridViewRow)e.Data;
        if (DeselectItemCommand != null)
            DeselectItemCommand.Execute(droppedItem.Item);
    }
}

#endregion DRAG AND DROP HANDLERS

The commands that are executed take care of moving the items from the available collection to the selected collection and vice versa.

So what I have going on is a user control that has a two way binding on the two grids to those collections. The command that is executed after the drop simply takes the value from the dropped object and removes it from one list to put it in the other. The grids update automatically since this is a two way binding.


Hope this helps anyone else in the future.