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

Don't drag when selecting text with mouse

4 Answers 417 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 17 Aug 2012, 11:26 AM
I have a RadListBox with DragDropBehavior, the RadListBox itemtemplates contain a textbox. I want the text in the textbox to be selectable using the mouse, but when I drag to select text, the item is dragged instead. Is it possible to disable drag within a control in an itemtemplate in a draggable RadListBox? I tried setting telerik:DragDropManager.AllowCapturedDrag="False" and telerik:DragDropManager.AllowDrag="False" on the textbox but that doesn't help.

Here's my little test project:

using System.Collections.ObjectModel;
 
namespace ListBoxTest
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
 
            DataContext = this;
 
            MyCollection = new ObservableCollection<string> { "test text 1", "test text 2", "test text 3", "test text 4", "test text 5", "test text 6" };
        }
 
        public ObservableCollection<string> MyCollection { get; private set; }
    }
}

<Window
    x:Class="ListBoxTest.MainWindow"
    Title="MainWindow" Height="500" Width="525">
    <telerik:RadListBox
        ItemsSource="{Binding MyCollection}">
        <telerik:RadListBox.ItemTemplate>
            <DataTemplate>
                <Grid Height="50" Width="100" Background="LightBlue" telerik:DragDropManager.AllowCapturedDrag="True">
                    <TextBox
                        Text="{Binding .}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        telerik:DragDropManager.AllowCapturedDrag="False"
                        telerik:DragDropManager.AllowDrag="False"/>
                </Grid>
            </DataTemplate>
        </telerik:RadListBox.ItemTemplate>
        <telerik:RadListBox.DragDropBehavior>
            <telerik:ListBoxDragDropBehavior />
        </telerik:RadListBox.DragDropBehavior>
    </telerik:RadListBox>
</Window>

4 Answers, 1 is accepted

Sort by
0
Accepted
George
Telerik team
answered on 22 Aug 2012, 03:15 PM
Hello,

This behavior is expected because the RadListBoxItem container has AllowCapturedDrag set to true. In order to workaround the problem, I would suggest to remove the capture drag on TextBox_PreviewMouseLeftButtonDown handler and return it back in the TextBox_MouseLeave handler. Please, refer to the attached project and let me know if this helps.

Kind regards,
George
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Erik
Top achievements
Rank 1
answered on 24 Aug 2012, 04:56 PM
Thanks that works great!

I created an attached behavior based on your code, and added some code to prevent dragged text from having a the same template as the listboxitems:

public class NoDragBehavior : Behavior<FrameworkElement>
    {
        private FrameworkElement Element
        {
            get { return AssociatedObject; }
        }
 
        public DataTemplate DragDataTemplate
        {
            get { return (DataTemplate)GetValue(DragDataTemplateProperty); }
            set { SetValue(DragDataTemplateProperty, value); }
        }
 
        public static readonly DependencyProperty DragDataTemplateProperty = DependencyProperty.Register
        (
            "DragDataTemplate",
            typeof(DataTemplate),
            typeof(NoDragBehavior),
            null
        );
 
        protected override void OnAttached()
        {
            base.OnAttached();
 
            Element.PreviewMouseLeftButtonDown += ElementOnPreviewMouseLeftButtonDown;
            Element.MouseLeave += ElementMouseLeave;
        }
 
        protected override void OnDetaching()
        {
            base.OnDetaching();
 
            Element.PreviewMouseLeftButtonDown -= ElementOnPreviewMouseLeftButtonDown;
            Element.MouseLeave -= ElementMouseLeave;
        }
 
        private static void ElementOnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs mouseButtonEventArgs)
        {
            var listboxItem = (sender as FrameworkElement).ParentOfType<RadListBoxItem>();
            if (listboxItem == null) return;
 
            DragDropManager.SetAllowCapturedDrag(listboxItem, false);
            var listbox = listboxItem.ParentOfType<RadListBox>();
            listbox.DragVisualProvider = new EmptyDragVisualProvider();
        }
 
        private void ElementMouseLeave(object sender, MouseEventArgs e)
        {
            var listboxItem = (sender as FrameworkElement).ParentOfType<RadListBoxItem>();
            if (listboxItem == null) return;
 
            DragDropManager.SetAllowCapturedDrag(listboxItem, true);
            var listbox = listboxItem.ParentOfType<RadListBox>();
            listbox.DragVisualProvider = new DragVisualProvider { DraggedItemTemplate = DragDataTemplate };
        }
    }
0
Leland
Top achievements
Rank 1
answered on 06 Nov 2018, 06:06 PM
Is this still the preferred way to handle this scenario?
0
Vladimir Stoyanov
Telerik team
answered on 09 Nov 2018, 03:29 PM
Hello Leland,

Indeed the demonstrated in this thread approach is the way to go to achieve the custom behavior in question. I do hope that such an approach is suitable for your scenario.

That said, if it is not, or you are having troubles with the implementation, feel free to open a new support ticket and describe your scenario. 

Regards,
Vladimir Stoyanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListBox
Asked by
Erik
Top achievements
Rank 1
Answers by
George
Telerik team
Erik
Top achievements
Rank 1
Leland
Top achievements
Rank 1
Vladimir Stoyanov
Telerik team
Share this question
or