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

Drop preview line in ListBox

11 Answers 472 Views
DragAndDrop
This is a migrated thread and some comments may be shown as answers.
Mingxue
Top achievements
Rank 1
Mingxue asked on 01 Jul 2016, 06:01 PM

Hi,

I need to implement DragDrop feature between listBoxes and also re-order within ListBox. I know there is one good sample from Demo, see attachment screenshot. But What I am missing here is the Drop preview line. I know in RadTreeView, there is the default DragDrop behavior comes with a good Drop preview line and API for me to enable/disable it. How can I do the same for ListBox?

I thought about using RadTreeView to take advantage of the default DragDrop behavior, but don't know how to make the UI layout to look like this one in ListBox. Please advise if there is any alternatives to get the layout like the one in the demo, and the drop preview line in RadTreeView.

Many thanks,

Mingxue

11 Answers, 1 is accepted

Sort by
0
Nasko
Telerik team
answered on 05 Jul 2016, 11:15 AM
Hello Mingxue,

You could use the built-in ListBoxDragVisualProvider in order to achieve the desired visualization and indication of the drag and drop operation. More detailed information you could find on the following link from our documentation:
http://docs.telerik.com/devtools/wpf/controls/radlistbox/drag-and-drop/features-dragdrop

Hope this helps.

Regards,
Nasko
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Mingxue
Top achievements
Rank 1
answered on 08 Jul 2016, 08:51 PM

Below is how I am trying to follow the instructions from the docs:

        <Style x:Key="ListBoxDragDrop" TargetType="{x:Type telerik:RadListBoxItem}">
            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"></Setter>
        </Style>

Source RadListBox:

                        <telerik:RadListBox Name="RadParentTables" Grid.Row="1"
                                            ItemsSource="{Binding ParentTables}"
                                            ItemTemplate="{StaticResource TableTemplate}"
                                            ItemContainerStyle="{StaticResource ListBoxDragDrop}"
                                            AllowDrop="False">
                            <telerik:RadListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal"></WrapPanel>
                                </ItemsPanelTemplate>
                            </telerik:RadListBox.ItemsPanel>
                        </telerik:RadListBox>

Target RadListBox:

                <telerik:RadListBox Name="RadChildrenTables" Grid.Row="1"
                                    ItemsSource="{Binding ChildrenTables}"
                                    ItemTemplate="{StaticResource TableTemplate}"
                                    ItemContainerStyle="{StaticResource ListBoxDragDrop}"
                                    AllowDrop="True">
                    <telerik:RadListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal"></WrapPanel>
                        </ItemsPanelTemplate>
                    </telerik:RadListBox.ItemsPanel>
                    <telerik:RadListBox.DragDropBehavior>
                        <telerik:ListBoxDragDropBehavior />
                    </telerik:RadListBox.DragDropBehavior>
                    <telerik:RadListBox.DragVisualProvider>
                        <telerik:ScreenshotDragVisualProvider />
                    </telerik:RadListBox.DragVisualProvider>
                </telerik:RadListBox>

 

However, I ran into two issues.

1. On Drag over to target RadListBox, the drag visual icon is None. Is it expected or there is something that I am missing?

2. I am trying to get the drop location using follow code in .xaml.cs like TreeViewDragDropOptions

        private void EnableDragDrop(RadListBox container)
        {
            DragDropManager.AddDragOverHandler(container, OnDragOver, true);
            DragDropManager.AddDropHandler(container, OnDrop, true);
        }
        private void OnDrop(object sender, DragEventArgs eventArgs)
        {
        }
        private void OnDragOver(object sender, DragEventArgs eventArgs)
        {
            var _options = DragDropPayloadManager.GetDataFromObject(eventArgs.Data, TreeViewDragDropOptions.Key) as TreeViewDragDropOptions;
            if (_options == null)
            {
                eventArgs.Handled = true;
                return;
            }
        }

But since this is RadListBox, it always return null. Is there a way to know what's the drop position for ListBox?

0
Nasko
Telerik team
answered on 11 Jul 2016, 08:52 AM
Hello Mingxue,

In order to achieve the desired drag and drop functionality between the two ListBoxes both should have set DragDropBehavior - by setting it to the first ListBox as well the observed drag visual icon should be visualize as expected.

As for your second question, one possible approach to achieve the desired is to create a custom ListBoxDragDropBehavior and override its Drop method. Inside it you could access the InsertIndex from the DragDropState. We have created a sample project that demonstrates that approach.

We have also noticed that you are using WrapPanel as an ItemsPanel for the ListBoxes. Because of that we suggest you also to check our SDK example that demonstrates how to create custom DropVisual for such ListBoxes with WrapPanel :
https://github.com/telerik/xaml-sdk/tree/master/ListBox/CustomDropCueWithWrapPanel

We hope this will help you.


Regards,
Nasko
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Mingxue
Top achievements
Rank 1
answered on 13 Jul 2016, 07:27 PM

Many thanks, Nasko. All these information are very helpful.

A question regarding the sdk samples, is there a way to get a package or download these samples easier? By the link access, I don't see any way to download the whole project, and all I know for now is to copy paste code one by one, which makes it time consuming.

0
Nasko
Telerik team
answered on 14 Jul 2016, 08:37 AM
Hello Mingxue,

You could use our SDK Sample Browser application to easily connect to GitHub and download our SDK repository. Please, check the following article that provides a detailed information about the Sample Browser application:
http://docs.telerik.com/devtools/wpf/sdk-samples-browser

Hope this will help you.

Regards,
Nasko
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Mingxue
Top achievements
Rank 1
answered on 15 Jul 2016, 09:23 PM
That's awesome, thanks Nasko.
0
Mingxue
Top achievements
Rank 1
answered on 15 Jul 2016, 10:43 PM

Sorry, Nasko, I have almost everything done except one issue now.

Learned from the sdk sample to customize drop visual inside wrap panel, the drop preview indicator works all way except to be added into the last spot. I have been able to run the sample sdk as well, (thanks by the way, I installed the sdk browser which made it so much easier), and it has same issue. And during debugging, the function of GetLocation() is not called when the item is dropped into the last spot, so I have no idea how the position is calculated or affect it. What should I do in this case?

0
Mingxue
Top achievements
Rank 1
answered on 15 Jul 2016, 11:28 PM
Sorry, again, one more question...

I am overriding Drop() from ListBoxDragDropBehavior, but within DragDropState, I don't have access to the drop target control or source control, and so I don't have access to the DataContext either. In my project, I am using MVVM, and I need to deal with drop event so that target control's DataContext (View Model) will deal with the insert or re-order events. How can I accomplish this in MVVM structure?

0
Nasko
Telerik team
answered on 18 Jul 2016, 10:08 AM
Hello Mingxue,

Currently, the logic for the calculation of the location of the last item of RadListBox is an internal one and could not be overridden - it is a specific logic that if it is changed could lead to unexpected behavior and because of that we don't provide it for overriding. Unfortunately, we could not suggest you any proper approach of achieving the desired behavior of RadListBox with that current implementation.

As for you second question about accessing the DataContext inside your custom DragDropBehavior you could create a public additional property inside the custom DragDropBehavior and set it with your DataContext - please, check the attached sample that demonstrates that approach.

I hope this will help you.

Regards,
Nasko
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Mingxue
Top achievements
Rank 1
answered on 25 Jul 2016, 11:37 PM

Many thanks to your continuous help on this subject. I can see how you are assigning the ViewModel as dependency properties here. However, it seems to be assigned during xaml load time, not run-time. In most of projects, deep in the hierarchy tree, the ViewModel instance is only created run-time. Wondering if you could help with the run-time approach?

Best,

Mingxue

0
Nasko
Telerik team
answered on 27 Jul 2016, 10:43 AM
Hi Mingxue,

In order to achieve the desired behavior in run-time you could create one additional class that derives from Freezable - Freezable objects can inherit the DataContext even when they’re not in the visual or logical tree. Inside it you could declare one additional dependency property that needs to be bound to the DataContext of the ListBox. By binding the property to of the ListBoxDragDropBehavior to the property of the Freezable object when the DataContext of the ListBox changes during run-time the property will be updated as expected. We have modified the sample project with the described above approach and you could run and evaluate it.

Hope this helps.

Regards,
Nasko
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
DragAndDrop
Asked by
Mingxue
Top achievements
Rank 1
Answers by
Nasko
Telerik team
Mingxue
Top achievements
Rank 1
Share this question
or