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

Drag rows from one GridView into another GridView in Silverlight 4

1 Answer 33 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 07 Dec 2011, 03:38 PM
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

1 Answer, 1 is accepted

Sort by
0
Joshua
Top achievements
Rank 1
answered on 07 Dec 2011, 07:07 PM
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.
Tags
GridView
Asked by
Joshua
Top achievements
Rank 1
Answers by
Joshua
Top achievements
Rank 1
Share this question
or