Two way drag and drop between listbox and datagrid in wpf

Question

I am looking for some help implementing two way drag and drop functionality between ListBox and DataGrid column in WPF. i have searched through the net and managed to grab drag-drop samples but they don't fulfill my needs, plus most of them are having some missing codes. My datagrid contains two columns say EmployeeName and DepartmentName. These values are coming from collection which is initially loaded with EmployeeName only. which means departmentname column is blank. User can then select the appropriate department using drag-drop. Department names are loaded in Listbox. Departmentname is required to be selected from Listbox, draged and droped in to datagrid column. with that Employeename will be mapped to department name. Once dropped, that department name should be removed from listbox so that it can't be mapped against another employee. Mapping can be altered by dragging the department name back to the listbox from datagrid and re-selecting another departmentname for drag-drop.

My Xaml is something like this. (it is not actually employee/department in the code but i have used that to explain what i am looking for)

<DataGrid x:Name="DatagridEmployeeMapping"  Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,5,5,5" 
     ItemsSource="{Binding ElementName=MWindow, Path=Settings.EmployeeMapping}" GridLinesVisibility="Vertical" AutoGenerateColumns="False" CanUserAddRows="False" IsReadOnly="False" SelectionMode="Single" >
  <DataGrid.Columns>
      <DataGridTextColumn Header="Employee Name" Binding="{Binding Path=eName}" Width="1*"   IsReadOnly="True" />
       <DataGridTextColumn Header="Department Name" Binding="{Binding Path=dName}" Width="1*"  IsReadOnly="True"  />
  </DataGrid.Columns>
  </DataGrid>

<ListBox x:Name="ListboxDepartmentData" Grid.Column="2" Grid.Row="1"  Margin="5,5,5,5" 
    ItemsSource="{Binding ElementName=MWindow, Path=DepartmentDetails}" DisplayMemberPath="Name" ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>

Any link, sample code, suggestion will be appreciated. Regards, Minal

Mike1991 Mike1991 · Accepted Answer · 2013-07-12T06:35:55

I would try something like this:

http://www.codeproject.com/Articles/420545/WPF-Drag-and-Drop-MVVM-using-Behavior

You would have to extend the interfaces a little bit:

interface IDragable
{
    Type DataType { get; }

    // removes the department from the employ if source = grid and if source = listbox it removes the department from the list.
    void Remove(object i); 

    // returns the department if source = grid and if source = listbox.
    object GetDataToDrag(); 
}

interface IDropable
{
    Type DataType { get; }

    // if target = grid -> set department on current employee, if target = listbox -> add item to listbox.
    void Drop(object data) 
}

So you need 2 ViewModels -> one for the grid, and one for the ListBox and all of them Implement IDragable and IDropable.

And the behaviors are pretty much the same like in the codeproject article i posted above.

If you need further assistance with them simply ask ;)

Two way drag and drop between listbox and datagrid in wpf

1 Answers