Treeview and ListBox DragAndDrop

[jean michel]

Hello people.

I have a ListBox with DragAndDrop and would like to move the items on this list for adding a Treeview node.

I appreciate the help.

[Tina Stancheva]

Hello jean michel,

Please take a look at the How to Implement Drag and Drop Between TreeView and Other Controls article and let me know if this is what you had in mind or if you need more info.

Regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[jean michel]

Hello Tina,

This error occurs when compiling.

In line with this error below.

In the event: OnListBoxDragQuery

 
var payload = meusPapeisBox.SelectedItems.Cast<object>().ToList();

Error: System.Collections.Ilist does not contain a definition for Cast

My XAML:

  

<ListBox x:Name="meusPapeisBox" Margin="10 40 10 10"
                         BorderThickness="0"
                        ItemContainerStyle="{StaticResource draggableItemStyle}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 0 25 0">
                                        <Image Source="{Binding DescricaoImagem}" Margin="0 0 3 0" Width="55" Height="55"
                                        HorizontalAlignment="Center">
                                            <ToolTipService.ToolTip>
                                                <ToolTip Content="{Binding Descricao}"></ToolTip>
                                            </ToolTipService.ToolTip>
                                        </Image>
                                        <StackPanel Orientation="Vertical" Width="80" Height="55" >
                                            <TextBlock Text="{Binding Nome}" HorizontalAlignment="Left" FontWeight="Bold" />
                                            <TextBlock Text="{Binding Descricao}" HorizontalAlignment="Left"  TextWrapping="Wrap"  FontStyle="Italic" />
                                        </StackPanel>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <Primitives:RadUniformGrid
                                HorizontalAlignment="Left" VerticalAlignment="Top" Columns="4" />
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                        </ListBox>

[jean michel]

Hi,

I discovered the problem has to import System.Linq

But now I'm having another problem

How can I move to the Treeview the properties DefaultImageSrc and Header from the selected object

[Tina Stancheva]

Hello jean michel,

Please accept my apology for the delayed response.

I am not sure that I understand your scenario correctly.

However, I prepared a sample project for you, illustrating how you can drag and drop items from ListBox to RadTreeView. The ListBox items are databound to a business object, with two properties - EmployeeName and IconPath. Also ListBoxItems can only be dropped among the Employee collection in the RadTreeView and when the item is dropped a new item is added in the RadTreeView - Employee with Name = EmployeeName and DefaultImageSrc = IconPath.

Please take a look at the project and let me know if this is what you had in mind or if you need more info.

Best wishes,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[jean michel]

Solution:

In the event onDropInfo:

if (e.Options.Status == DragStatus.DropComplete)
                {
                    if (destinationItem != null && papeis != null)
                    {
                        foreach (var item in papeis)
                        {

                            destinationItem.Items.Add(new Telerik.Windows.Controls.RadTreeViewItem()
                            {
                                Header = item.Nome,
                                DefaultImageSrc = item.DescricaoImagem,
                            });

                            destinationItem.IsExpanded = true;

                            statusDrag = 0;


                        }

                        foreach (Telerik.Windows.Controls.RadTreeViewItem itens in RadHierarquia.Items)
                        {
                            LoadTreeView(itens);
                        }


                        e.Handled = true;

                    }

[jean michel]

Hello Tina,

I implemented your example, but because I can not insert the item in the listbox item in the TreeView? Is only possible to insert before or after the item from the TreeView.

Thanks.

[Tina Stancheva]

Hello jean michel,

If the RadTreeView is databound to a business object, when you are dropping the items in the TreeView you won't be able to easily get the new RadTreeViewItem that is created to nest the dropped object. Therefore it would be hard to display the Image from the ListBoxItem using the DefaultImageSource.

I attached a new project that illustrates  how to  drag items from the ListBox and drop them into certain TreeViewItems (in this case you can drop items before or after an employee and inside a department in the TreeView). Also please note that I added an IconPath property to the Employee class and also added an Image to the EmployeeTemplate in order to allow images to be displayed in front of the employees.

This solution is much better than the one, using the DefaultImageSource property of the RadTreeViewItem to display the dragged image. Please give it a try and let me know if it works for you.

Regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[jean michel]

The problem is when I position the item on the item treview. The option to insert within the item is not enabled

[Tina Stancheva]

Hello jean michel,

Sorry about that, I left out the constructor for the Employee class.
I also modified the OnTreeViewDropInfo() event handler to include dropping items into the Employees branch.

Let me know if I can assist you further.

Greetings,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[jean michel]

Tina,

Ok, it worked thank you.

Now I'm trying to do the same with the TreeView example Self-reference hierarchy and I'm having the same problem.

[Tina Stancheva]

Hello Jean Michel,

I attached a couple of projects demonstrating how you can use a HierarchyConverter that allows you to implement the drag and drop functionality that you are looking for. Please take a look at them and let me know if you need more info.

All the best,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.