RadListBox Drag and Drop without removing "dropped" item

2 posts, 0 answers
  1. IT
    IT avatar
    1 posts
    Member since:
    Nov 2014

    Posted 28 Apr 2015 Link to this post

    We have 2 Radlistboxes within a usercontrol.  We can drag and drop items between both with no issues and can reorder within each listbox with no issues either. Each radlistbox is highly stylized with grid's within each to create the look we need and to position data when drag and drop occurs.

    What we would like to do is allow items from radlistbox1 to be dragged into radlistbox2.  However, we do not want the item from radlistbox1 to be removed.  Is there a built in function that would allow us to do this relatively simply? 

    All examples (in documentation) and demo wpf drag and drop but remove items.  Let's see an example that matches what we need.  Documentation and forums have not given us an ideas on how to implement this functionality.

    Any code examples would be helpful also.

    Thanks

     See partial Code below for the user control

     

    <UserControl.Resources>
            <Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">
                <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ExhibitType}" Value="CE">
                        <Setter Property="BorderBrush" Value="#DAF2CB"></Setter>
                        <Setter Property="Background" Value="#F2F7EF"></Setter>
                        <Setter Property="Margin" Value="0,2,0,2"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>

        </UserControl.Resources>

    <telerik:RadListBox x:Name="RadListBox1" TabIndex="1" Grid.Row="0" Margin="0,5,0,0" FontSize="11" 
                                                SelectionMode="Multiple"  
                                                ItemContainerStyle="{StaticResource DraggableListBoxItem}">
                                <telerik:RadListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid telerik:DragDropManager.AllowDrag="True" >
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <Button x:Name="btnPreviewReportLayoutImage" Click="btnPreviewReportLayoutImage_Click" 
                                                    Height="16" Width="16" Margin="3 0 3 0" Grid.Column="0" 
                                                    ToolTip="Click On Image To View Report Layout" HorizontalAlignment="Left">
                                                <Button.Template>
                                                    <ControlTemplate>
                                                        <Image Source="../Images/ReportImage2.png"  />
                                                    </ControlTemplate>
                                                </Button.Template>
                                            </Button>
                                            <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Grid.Column="1"></TextBlock>
                                        </Grid>
                                    </DataTemplate>
                                </telerik:RadListBox.ItemTemplate>
                                <telerik:RadListBox.DragVisualProvider>
                                    <telerik:ScreenshotDragVisualProvider />
                                </telerik:RadListBox.DragVisualProvider>
                                <telerik:RadListBox.DragDropBehavior>
                                    <telerik:ListBoxDragDropBehavior />
                                </telerik:RadListBox.DragDropBehavior>
                            </telerik:RadListBox>

     

    <telerik:RadListBox x:Name="RadListBox2" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="5" Margin="2,5,2,2" FontSize="11"
                                            AllowDrop="True" SelectionMode="Multiple" 
                                            ItemContainerStyle="{StaticResource DraggableListBoxItem}"
                                            ScrollViewer.CanContentScroll="True">
                            <telerik:RadListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid telerik:DragDropManager.AllowDrag="True" >
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="400" />
                                            <ColumnDefinition Width="80" />
                                            <ColumnDefinition Width="80" />
                                            <ColumnDefinition Width="140" />
                                            <ColumnDefinition Width="2*" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap"></TextBlock>
                                        <ComboBox x:Name="cbGroupLevel" Grid.Column="1" SelectedValuePath="Content" SelectedValue="{Binding Grouping}" Margin="0 0 15 0" >
                                            <ComboBoxItem>E</ComboBoxItem>
                                            <ComboBoxItem>P</ComboBoxItem>
                                            <ComboBoxItem>-</ComboBoxItem>
                                        </ComboBox>
                                        <ComboBox x:Name="cbTOCLevel" Grid.Column="2" SelectedValuePath="Content" SelectedValue="{Binding TOCLevel}" Margin="0 0 15 0">
                                            <ComboBoxItem>0</ComboBoxItem>
                                            <ComboBoxItem>1</ComboBoxItem>
                                            <ComboBoxItem>2</ComboBoxItem>
                                            <ComboBoxItem>3</ComboBoxItem>
                                            <ComboBoxItem>4</ComboBoxItem>
                                        </ComboBox>
                                        <ComboBox x:Name="cbPortfolios" Grid.Column="3" SelectedValuePath="Content" 
                                                  SelectedValue="{Binding Portfolios}" Margin="0 0 15 0">
                                            <ComboBox.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel Orientation="Horizontal">
                                                        <CheckBox IsChecked="{Binding IsSelected}" Width="20" VerticalAlignment="Center" />
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ComboBox.ItemTemplate>
                                            <ComboBoxItem IsSelected="True">All</ComboBoxItem>
                                            <ComboBoxItem>Placeholder</ComboBoxItem>
                                            <ComboBoxItem>Placeholder</ComboBoxItem>
                                            <ComboBoxItem>Placeholder</ComboBoxItem>
                                            <ComboBoxItem>Placeholder with a very long name.......................</ComboBoxItem>
                                            <ComboBoxItem>Placeholder</ComboBoxItem>
                                            <ComboBoxItem>Placeholder</ComboBoxItem>
                                            <ComboBoxItem>Placeholder</ComboBoxItem>
                                        </ComboBox>
                                        <TextBlock Grid.Column="4" Text="{Binding TOCTitle}"></TextBlock>
                                    </Grid>
                                </DataTemplate>
                           </telerik:RadListBox.ItemTemplate>
                            <telerik:RadListBox.DragVisualProvider>
                                <telerik:ScreenshotDragVisualProvider />
                            </telerik:RadListBox.DragVisualProvider>
                            <telerik:RadListBox.DragDropBehavior>
                                <telerik:ListBoxDragDropBehavior AllowReorder="True"/>
                            </telerik:RadListBox.DragDropBehavior>

                        </telerik:RadListBox>

  2. Nasko
    Admin
    Nasko avatar
    585 posts

    Posted 01 May 2015 Link to this post

    Hi,

    In order to achieve the desired functionality for RadListBox's DragDropBehavior you need to customize the default one. Please, check the following article from our help documentation that provides more detailed information how to implement a custom ListBoxDragDropBehavior:
    http://docs.telerik.com/devtools/wpf/controls/dragdropmanager/behaviors/listboxdragdropbehavior

    For you concrete scenario in order to prevent the items from removing as soon as they get dragged and dropped you need to override the base DragDropCompleted method - the base implementation of the method removes the items from the collection.
    public class MyListBoxDragDropBehavior : ListBoxDragDropBehavior
    {
        public override void DragDropCompleted(DragDropState state)
        {
            //implement some custom logic here
            //Do not call -> base.DragDropCompleted(state);
        }
    }

    Hopes this helps.

    Regards,
    Nasko
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top