Drag and Drop from RadListBox to RadGridView with RowDataTemplate

[Hadrian]

Hi,

I wanted to know if it is contemplated the possibility of drag and drop from a component such as the RadListBox for example to a RadGridView which has as RowDataTemplate another RadGridView. But, only allow to drag the activity of the RadListBox to the child RadGridView. How could I achieve that?

Thanks in advance.

 

<Window x:Class="ComponentesTestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:local="clr-namespace:ComponentesTestWPF"
        mc:Ignorable="d"
        Title="MainWindow">
    <Window.Resources>
        
        <!--Child grid (activities template)-->
        <DataTemplate x:Key="ChildTemplate">
            <Grid MaxWidth="800" HorizontalAlignment="Left" Margin="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <telerik:RadButton Grid.Column="1" Width="25" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,0,0" 
                                   Command="{Binding DataContext.Commands[DeleteCommand],RelativeSource={RelativeSource AncestorType=UserControl}}" 
                                   CommandParameter="{Binding }" ToolTipService.ToolTip="Delete">
                    <TextBlock Text="Delete"/>
                </telerik:RadButton>

                <telerik:RadGridView x:Name="ActiviesRadGridView" 
                                     Grid.Column="0" IsBusy="{Binding IsBusy}" ActionOnLostFocus="None" CanUserFreezeColumns="False" 
                                     SelectionMode="Single" MaxHeight="200" MinHeight="150" AutoGenerateColumns="False"
                                     ItemsSource="{Binding Activities, Mode=TwoWay}" 
                                     SelectedItem="{Binding SelectedActivity, RelativeSource={RelativeSource AncestorType=UserControl}, Mode=TwoWay}"
                                     FrozenColumnsSplitterVisibility="Collapsed" CanUserDeleteRows="True" NewRowPosition="None">

                    <telerik:RadGridView.RowStyle>
                        <Style TargetType="telerik:GridViewRow">
                            <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
                        </Style>
                    </telerik:RadGridView.RowStyle>

                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding DescActivity}" Width="*" TextWrapping="Wrap" IsReadOnly="True"/>
                    </telerik:RadGridView.Columns>

                    <telerik:RadGridView.Resources >
                        <Style TargetType="telerik:GridViewRow" >
                            <Setter Property="AllowDrop" Value="True"/>
                            <Setter Property="telerik:DragDropManager.AllowDrag" Value="True"/>
                            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"/>
                        </Style>
                    </telerik:RadGridView.Resources>

                </telerik:RadGridView>

            </Grid>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        
        <!--Main grid (groups)-->
        <telerik:RadGridView x:Name="GroupsGridView"  Grid.Column="0"
                             SelectionMode="Extended" Margin="0,5,5,0" ActionOnLostFocus="None" CanUserFreezeColumns="False" 
                             ItemsSource="{Binding Group, Mode=TwoWay}" 
                             SelectedItem="{Binding SelectedGroup, Mode=TwoWay}"              
                             RowDetailsTemplate="{StaticResource ChildTemplate}" IsBusy="{Binding IsBusy}">

            <telerik:RadGridView.Columns>
                <telerik:GridViewToggleRowDetailsColumn ExpandMode="Multiple"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Width="*" TextWrapping="Wrap" IsReadOnly="True"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Quantity}" Width="Auto" TextWrapping="Wrap" IsReadOnly="True"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Info}" Width="Auto" TextWrapping="Wrap" IsReadOnly="True"/>
            </telerik:RadGridView.Columns>

            <telerik:RadGridView.Resources >
                <Style TargetType="telerik:GridViewRow" >
                    <Setter Property="AllowDrop" Value="False"/>
                    <Setter Property="telerik:DragDropManager.AllowDrag" Value="False"/>
                    <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="False"/>
                </Style>
            </telerik:RadGridView.Resources>
            
        </telerik:RadGridView>

        <!--ListBox (activities)-->
        <telerik:RadListBox x:Name="ActivitiesListBox" Grid.Column="1" Width="200" ItemsSource="{Binding ActivitiesList}" />
        
    </Grid>
</Window>

[Stenly]

Hello Hadrian,

To achieve this behavior, you could utilize the DragDropManager and the events that it exposes.

The DragInitialize and GiveFeedback events can be attached to the RadListBox instance, in order to prepare the drag payload, the dragged visual, and its offset, as well as to change the cursor.

The Drop event can be attached to the RadGridView control inside the RowDetailsTemplate property of the parent RadGridView. In the added event handler, the drag payload's data can be retrieved and the dragged item can be added to the collection that the RadGridView instance displays.

Both of these behaviors are set via attached properties.

I have attached a sample project for you to test.

Regards,
Stenly
Progress Telerik