Mr.

[wpfdev]

In the TreeView Data Binding sample, I set IsDragDropEnabled="True". Then tried to drap and drop a Team from one Division to another Division, but it didn't work.

By the way, how could I change the post title. I want to change the post title to be "Problem of Drag and Drop in TreeView Data Binding".

[k f]

Hello,

Have you checked out the Drag & Drop sample from the Demos that install when you install the WPF controls.  They will be under the demo directory in your WPF installation install directory.  C:\Program Files (x86)\Telerik\RadControls for WPF Q1 2010\Demos

Without seeing your source I would suggest starting in the constructor code in the example.  Have you wired up all your handler's for the drag & drop?

Here's code behind from the sample:

public Example()
        {
            InitializeComponent();

            this.InitializeComponent();
            this.RadGridView_DropConsumer.ItemsSource = GetObservableObjectData();

            this.TextBox_DropConsumer.AddHandler(RadDragAndDropManager.DropQueryEvent,
                new EventHandler<DragDropQueryEventArgs>(TextBox_OnDropQuery));

            this.TextBox_DropConsumer.AddHandler(RadDragAndDropManager.DropInfoEvent,
                new EventHandler<DragDropEventArgs>(TextBox_OnDropInfo));

            this.RadGridView_DropConsumer.AddHandler(RadDragAndDropManager.DropQueryEvent,
                new EventHandler<DragDropQueryEventArgs>(RadGridView1_OnDropQuery));

            this.RadGridView_DropConsumer.AddHandler(RadDragAndDropManager.DropInfoEvent,
                new EventHandler<DragDropEventArgs>(RadGridView1_OnDropInfo));
        }
        ObservableCollection<String> personList = new ObservableCollection<String>();
        private ObservableCollection<String> GetObservableObjectData()
        {

            for (int i = 0; i < 4; i++)
            {
                personList.Add(String.Format("Item {0}", i));
            }

            return personList;
        }

        void TextBox_OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            e.QueryResult = true;
        }

        void TextBox_OnDropInfo(object sender, DragDropEventArgs e)
        {
            if (e.Options.Status == DragStatus.DropComplete)
            {
                String q = ((e.Options.Payload as Collection<Object>)[0] as RadTreeViewItem).Header as String;
                this.TextBox_DropConsumer.Text = q;
            }
        }

        void RadGridView1_OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            e.QueryResult = true;
        }

        void RadGridView1_OnDropInfo(object sender, DragDropEventArgs e)
        {
            if (e.Options.Status == DragStatus.DropComplete)
            {
                Collection<Object> payload = e.Options.Payload as Collection<Object>;

                foreach (object item in payload)
                {
                    String itemHeader = (item as RadTreeViewItem).Header as String;
                    if (!personList.Contains(itemHeader))
                    {
                        personList.Add(itemHeader);
                    }
                }
            }
        }

If looking at the example doesn't get you what you need, you might want to post the xaml of your code and any code behind to help us try to better answer your question.

Also, here's a link to the RadTreeView documentation.

http://www.telerik.com/help/wpf/radtreeview-overview2.html

[wpfdev]

Thanks for your reply. I have already checked out the demo as you mentioned. In the TreeView demo, there is one sample called Databinding. In the sample, I tried to set IsDragDropEnabled="True", but there are some problems of drag and drop. Could you please try the same as I do and see what happens?

Here is the xaml and code from your sample (I added IsDragDropEnabled="True" to the TreeView)

<

 

QuickStart:ExampleControl x:Class="Telerik.Windows.Examples.TreeView.WPF.Databinding.Example"

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

xmlns:QuickStart="clr-namespace:Telerik.Windows.QuickStart;assembly=Telerik.Windows.QuickStart"

 

xmlns

 

:Example="clr-namespace:Telerik.Windows.Examples.TreeView.WPF.Databinding"

 

 

xmlns:Telerik="http://schemas.telerik.com/2008/xaml/presentation">

 

 

 

<Grid>

 

 

 

<Grid.Resources>

 

 

 

<Style TargetType="ToggleButton" x:Key="Expander">

 

 

 

<Setter Property="IsTabStop" Value="False" />

 

 

 

<Setter Property="Cursor" Value="Hand" />

 

 

 

<Setter Property="Template">

 

 

 

<Setter.Value>

 

 

 

<ControlTemplate TargetType="{x:Type ToggleButton}">

 

 

 

<ControlTemplate.Triggers>

 

 

 

<Trigger Property="IsMouseOver" Value="True">

 

 

 

<Trigger.EnterActions>

 

 

 

<BeginStoryboard>

 

 

 

<Storyboard>

 

 

 

<DoubleAnimation Duration="0:0:0.05"

 

 

Storyboard.TargetName="Button"

 

 

Storyboard.TargetProperty="Opacity" To="0" />

 

 

 

<DoubleAnimation Duration="0:0:0.05"

 

 

Storyboard.TargetName="ButtonOver"

 

 

Storyboard.TargetProperty="Opacity" To="1" />

 

 

 

</Storyboard>

 

 

 

</BeginStoryboard>

 

 

 

</Trigger.EnterActions>

 

 

 

</Trigger>

 

 

 

<Trigger Property="IsChecked" Value="True">

 

 

 

<Trigger.EnterActions>

 

 

 

<BeginStoryboard>

 

 

 

<Storyboard>

 

 

 

<DoubleAnimation Duration="0:0:0.05"

 

 

Storyboard.TargetName="CollapsedVisual"

 

 

Storyboard.TargetProperty="Opacity" To="0" />

 

 

 

<DoubleAnimation Duration="0:0:0.05"

 

 

Storyboard.TargetName="CollapsedVisualOver"

 

 

Storyboard.TargetProperty="Opacity" To="0" />

 

 

 

</Storyboard>

 

 

 

</BeginStoryboard>

 

 

 

</Trigger.EnterActions>

 

 

 

<Trigger.ExitActions>

 

 

 

<BeginStoryboard>

 

 

 

<Storyboard>

 

 

 

<DoubleAnimation Duration="0:0:0.05"

 

 

Storyboard.TargetName="CollapsedVisual"

 

 

Storyboard.TargetProperty="Opacity" To="1" />

 

 

 

<DoubleAnimation Duration="0:0:0.05"

 

 

Storyboard.TargetName="CollapsedVisualOver"

 

 

Storyboard.TargetProperty="Opacity" To="1" />

 

 

 

</Storyboard>

 

 

 

</BeginStoryboard>

 

 

 

</Trigger.ExitActions>

 

 

 

</Trigger>

 

 

 

</ControlTemplate.Triggers>

 

 

 

<Grid>

 

 

 

<Grid x:Name="Button" Margin="0,7,4,0" HorizontalAlignment="Right"

 

 

VerticalAlignment="Top" Width="11" Height="11">

 

 

 

<Grid.Background>

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

<GradientStop Color="#3F047BA5" Offset="0.996" />

 

 

 

<GradientStop Color="#00000000" Offset="0" />

 

 

 

</LinearGradientBrush>

 

 

 

</Grid.Background>

 

 

 

<Rectangle Stroke="#FF000000" HorizontalAlignment="Left"

 

 

VerticalAlignment="Top" Width="11" Height="11" />

 

 

 

<Rectangle x:Name="CollapsedVisual" Fill="#FF000000"

 

 

HorizontalAlignment="Left" VerticalAlignment="Top"

 

 

Width="1" Height="5" Margin="5,3,0,0" />

 

 

 

<Rectangle Fill="#FF000000" VerticalAlignment="Top"

 

 

HorizontalAlignment="Left" Height="1" Width="5"

 

 

Margin="3,5,0,0" />

 

 

 

</Grid>

 

 

 

<Grid x:Name="ButtonOver" Margin="0,7,4,0"

 

 

HorizontalAlignment="Right" VerticalAlignment="Top"

 

 

Width="11" Height="11">

 

 

 

<Rectangle Stroke="#FF167497" HorizontalAlignment="Left"

 

 

VerticalAlignment="Top" Width="11" Height="11">

 

 

 

<Rectangle.Fill>

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

<GradientStop Color="#26167497" Offset="1" />

 

 

 

<GradientStop Color="#00167497" Offset="0" />

 

 

 

</LinearGradientBrush>

 

 

 

</Rectangle.Fill>

 

 

 

</Rectangle>

 

 

 

<Rectangle x:Name="CollapsedVisualOver" Fill="#FF167497"

 

 

HorizontalAlignment="Left" VerticalAlignment="Top"

 

 

Width="1" Height="5" Margin="5,3,0,0" />

 

 

 

<Rectangle Fill="#FF167497" VerticalAlignment="Top"

 

 

HorizontalAlignment="Left" Height="1" Width="5"

 

 

Margin="3,5,0,0" />

 

 

 

</Grid>

 

 

 

</Grid>

 

 

 

</ControlTemplate>

 

 

 

</Setter.Value>

 

 

 

</Setter>

 

 

 

</Style>

 

 

 

<Example:LeaguesDataSource x:Key="MyList" />

 

 

 

<HierarchicalDataTemplate x:Key="Division" ItemsSource="{Binding Teams}">

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

<Image Source="{Binding Image}" Margin=" 0,0,6,0" />

 

 

 

<TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="12" />

 

 

 

</StackPanel>

 

 

 

</HierarchicalDataTemplate>

 

 

 

<HierarchicalDataTemplate x:Key="League" ItemTemplate="{StaticResource Division}"

 

 

ItemsSource="{Binding Divisions}">

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

<Image Source="{Binding Image}" Margin=" 0,0,6,0" />

 

 

 

<TextBlock Text="{Binding Name}" Foreground="Black" FontWeight="Bold"

 

 

FontSize="15" />

 

 

 

</StackPanel>

 

 

 

</HierarchicalDataTemplate>

 

 

 

</Grid.Resources>

 

 

 

<Grid Width="300" Height="320" HorizontalAlignment="Center" VerticalAlignment="Center">

 

 

 

<Border BorderBrush="#FF000000" CornerRadius="5" BorderThickness="5" Background="#FFFFFFFF">

 

 

 

<Telerik:RadTreeView

 

 

VerticalAlignment="Top" IsDragDropEnabled="True"

 

 

ExpanderStyle="{StaticResource Expander}"

 

 

ItemsSource="{Binding Source={StaticResource MyList}}"

 

 

ItemTemplate="{StaticResource League}" />

 

 

 

</Border>

 

 

 

</Grid>

 

 

 

</Grid>

 

</

 

QuickStart:ExampleControl>

 

using

 

System.Collections.Generic;

 

using

 

System.Windows;

 

using

 

System.Windows.Controls;

 

using

 

Telerik.Windows.QuickStart;

 

namespace

 

Telerik.Windows.Examples.TreeView.WPF.Databinding

 

{

 

/// <summary>

 

 

/// Interaction logic for Example.xaml

 

 

/// </summary>

 

 

public partial class Example : ExampleControl

 

{

 

public Example()

 

{

InitializeComponent();

}

}

 

public class League

 

{

 

public League(string name, string image)

 

{

_name = name;

 

this.image = image;

 

_divisions =

new List<Division>();

 

}

 

 

string _name;

 

 

string image;

 

 

public string Name { get { return _name; } }

 

 

public string Image { get { return image; } }

 

 

List<Division> _divisions;

 

 

public List<Division> Divisions { get { return _divisions; } }

 

}

 

public class Division

 

{

 

public Division(string name, string image)

 

{

_name = name;

 

this.image = image;

 

_teams =

new List<Team>();

 

}

 

string _name;

 

 

string image;

 

 

public string Name { get { return _name; } }

 

 

public string Image { get { return image; } }

 

 

List<Team> _teams;

 

 

public List<Team> Teams { get { return _teams; } }

 

}

 

public class Team

 

{

 

public Team(string name, string image)

 

{

_name = name;

 

this.image = image;

 

}

 

string _name;

 

 

string image;

 

 

public string Name { get { return _name; } }

 

 

public string Image { get { return image; } }

 

}

 

public class LeaguesDataSource : List<League>

 

{

 

public LeaguesDataSource()

 

{

 

League leagueA = new League("League A", "/TreeView/WPF/Divisions/League_A.png");

 

 

League leagueB = new League("League B", "/TreeView/WPF/Divisions/League_B.png");

 

 

Division leagueADivisionA = new Division("Division A", "/TreeView/WPF/Divisions/Division_A.png");

 

leagueADivisionA.Teams.Add(

new Team("Team I", "/TreeView/WPF/Divisions/TeamI.png"));

 

leagueADivisionA.Teams.Add(

new Team("Team II", "/TreeView/WPF/Divisions/TeamII.png"));

 

leagueADivisionA.Teams.Add(

new Team("Team III", "/TreeView/WPF/Divisions/TeamIII.png"));

 

leagueADivisionA.Teams.Add(

new Team("Team IV", "/TreeView/WPF/Divisions/TeamIV.png"));

 

leagueADivisionA.Teams.Add(

new Team("Team V", "/TreeView/WPF/Divisions/TeamV.png"));

 

leagueA.Divisions.Add(leagueADivisionA);

 

Division leagueADivisionB = new Division("Division B", "/TreeView/WPF/Divisions/Division_B.png");

 

leagueADivisionB.Teams.Add(

new Team("Team Blue", "/TreeView/WPF/Divisions/Team_Blue.png"));

 

leagueADivisionB.Teams.Add(

new Team("Team Red", "/TreeView/WPF/Divisions/Team_Red.png"));

 

leagueADivisionB.Teams.Add(

new Team("Team Yellow", "/TreeView/WPF/Divisions/Team_Yellow.png"));

 

leagueADivisionB.Teams.Add(

new Team("Team Green", "/TreeView/WPF/Divisions/Team_Green.png"));

 

leagueADivisionB.Teams.Add(

new Team("Team Orange", "/TreeView/WPF/Divisions/Team_Orange.png"));

 

leagueA.Divisions.Add(leagueADivisionB);

 

Division leagueADivisionC = new Division("Division C", "/TreeView/WPF/Divisions/Division_C.png");

 

leagueADivisionC.Teams.Add(

new Team("Team East", "/TreeView/WPF/Divisions/Team_East.png"));

 

leagueADivisionC.Teams.Add(

new Team("Team West", "/TreeView/WPF/Divisions/Team_West.png"));

 

leagueADivisionC.Teams.Add(

new Team("Team North", "/TreeView/WPF/Divisions/Team_North.png"));

 

leagueADivisionC.Teams.Add(

new Team("Team South", "/TreeView/WPF/Divisions/Team_South.png"));

 

leagueA.Divisions.Add(leagueADivisionC);

 

Division leagueBDivisionA = new Division("Division A", "/TreeView/WPF/Divisions/Division_A.png");

 

leagueBDivisionA.Teams.Add(

new Team("Team 1", "/TreeView/WPF/Divisions/Team_1.png"));

 

leagueBDivisionA.Teams.Add(

new Team("Team 2", "/TreeView/WPF/Divisions/Team_2.png"));

 

leagueBDivisionA.Teams.Add(

new Team("Team 3", "/TreeView/WPF/Divisions/Team_3.png"));

 

leagueBDivisionA.Teams.Add(

new Team("Team 4", "/TreeView/WPF/Divisions/Team_4.png"));

 

leagueBDivisionA.Teams.Add(

new Team("Team 5", "/TreeView/WPF/Divisions/Team_5.png"));

 

leagueB.Divisions.Add(leagueBDivisionA);

 

Division leagueBDivisionB = new Division("Division B", "/TreeView/WPF/Divisions/Division_B.png");

 

leagueBDivisionB.Teams.Add(

new Team("Team Diamond", "/TreeView/WPF/Divisions/Team_Diamond.png"));

 

leagueBDivisionB.Teams.Add(

new Team("Team Heart", "/TreeView/WPF/Divisions/Team_Heart.png"));

 

leagueBDivisionB.Teams.Add(

new Team("Team Club", "/TreeView/WPF/Divisions/Team_Club.png"));

 

leagueBDivisionB.Teams.Add(

new Team("Team Spade", "/TreeView/WPF/Divisions/Team_Spade.png"));

 

leagueB.Divisions.Add(leagueBDivisionB);

 

Division leagueBDivisionC = new Division("Division C", "/TreeView/WPF/Divisions/Division_C.png");

 

leagueBDivisionC.Teams.Add(

new Team("Team Alpha", "/TreeView/WPF/Divisions/Team_Alpha.png"));

 

leagueBDivisionC.Teams.Add(

new Team("Team Beta", "/TreeView/WPF/Divisions/Team_Beta.png"));

 

leagueBDivisionC.Teams.Add(

new Team("Team Gamma", "/TreeView/WPF/Divisions/Team_Gamma.png"));

 

leagueBDivisionC.Teams.Add(

new Team("Team Delta", "/TreeView/WPF/Divisions/Team_Delta.png"));

 

leagueBDivisionC.Teams.Add(

new Team("Team Epsilon", "/TreeView/WPF/Divisions/Team_Epsilon.png"));

 

leagueB.Divisions.Add(leagueBDivisionC);

 

this.Add(leagueA);

 

 

this.Add(leagueB);

 

}

}

 

public class LeagueDataTemplateSelector : DataTemplateSelector

 

{

 

private HierarchicalDataTemplate leagueTemplate;

 

 

private HierarchicalDataTemplate divisionTemplate;

 

 

private DataTemplate teamTemplate;

 

 

public LeagueDataTemplateSelector()

 

{

}

 

public override DataTemplate SelectTemplate(object item, DependencyObject container)

 

{

 

if (this.leagueTemplate == null || this.divisionTemplate == null || this.teamTemplate == null)

 

{

 

FrameworkElement page = ((container as FrameworkElement).FindName("TemplateSelectorExample") as FrameworkElement);

 

 

this.leagueTemplate = page.Resources["League"] as HierarchicalDataTemplate;

 

 

this.divisionTemplate = page.Resources["Division"] as HierarchicalDataTemplate;

 

 

this.teamTemplate = page.Resources["Team"] as DataTemplate;

 

}

 

if (item is League)

 

{

 

return this.leagueTemplate;

 

}

 

else if (item is Division)

 

{

 

return this.divisionTemplate;

 

}

 

else if (item is Team)

 

{

 

return this.teamTemplate;

 

}

 

return null;

 

}

}

}

 

[Tina Stancheva]

Hi wpfdev,

In order to enable the DargAndDrop in this example, you need to change the type of the data collection the RadTreeView is bound to from List to ObservableCollection.

When a List collection is used, the changes made to the RadTreeView ItemsSource (in this case the dropping of the dragged items) don't affect the original business object and the result of the drag and drop cannot be seen.

You can take a look at this article, describing how you can enable some common DragAndDrop tasks.

Please let me know 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.

[wpfdev]

Thank you for your reply. Please replace my name with wpfdev in your post. I prefer not to have my name appear in the forum.

[wpfdev]

Hello Telerik,

Could you please replace my name with wpfdev in your recent post?

Thanks.

[wpfdev]

I have looked at the article you suggested and made an object databing through ObservableCollection. I managed to drag and drop items, but the items were not displayed properly. Some items are displayed on top of others. I think it is a bug of treeview itself.

Would you like to attach an example project here? This drap and drop functionality is really important for my work. It is one of the key things of the treeview evaluation I am doing.

I will appreciate for your help. Thanks.

[Tina Stancheva]

Hi wpfdev,

We would really appreciate it if you can share your code with us. That will help us further investigate the issue you are facing.

I also wanted to apologize for the caused inconvenience regarding the name I used when posting my previous reply. The change you requested was made.

Please let me know if I can further assist you.

Sincerely yours,
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.

[wpfdev]

I have managed to fix the problem by myself. I was using different objects to create a complicated treeview. Some objects have been declared as ObservableCollection, some others were still declared as Collection. These Collections caused problems. I have changed all of the objects to use ObservableCollection, and it worked. Sorry, it was the problem of my own code, but not your treeview. 

Thank you for all your help. If I need more help in the future, I will post messages here.

[Tina Stancheva]

Hello wpfdev,

I am glad that you managed to solve your issues.

And if you need additional info, we will be more than happy to help 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.