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

HierarchicalDataTemplate Drag & Drop

5 Answers 106 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Yassen
Top achievements
Rank 1
Yassen asked on 28 Oct 2016, 08:44 PM

Dear All,

I started using radtreeview to develop a treeview for first trial.

I am facing a problem with the dragdrop manager, which I belevie with the HierarchicalDataTemplate of my treeview.

The HierarchicalDataTemplate contain a self-reference parent-to-child on the same table as follows:

<telerik:HierarchicalDataTemplate x:Key="ListTemplate"
ItemsSource="{Binding Path=Children, Mode=TwoWay}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Label" Text="{Binding name}" Grid.Column="1" VerticalAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="2" VerticalAlignment="Center">
<TextBlock Text=" (" />
<TextBlock Text="{Binding order}" FontSize="10"/>
<TextBlock Text=")"/>
</StackPanel>
</Grid>
</telerik:HierarchicalDataTemplate>

<telerik:HierarchicalDataTemplate x:Key="BigSiteTemplate"
ItemsSource="{Binding Path=GroupList, Mode=TwoWay}"
ItemTemplate="{StaticResource ListTemplate}">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="{Binding Title}" Foreground="Blue" FontWeight="Bold" FontSize="10"/>
</StackPanel>
</telerik:HierarchicalDataTemplate>

 

and my treeview is binded to an observable collection of <User> as follows:

<telerik:RadTreeView x:Name="TOU" FontSize="10" Grid.Row="1"
IsLineEnabled ="True" IsTextSearchEnabled="True" IsEditable="True" IsVirtualizing="True"

ItemTemplate="{StaticResource BigSiteTemplate}"
SelectedItem="{Binding ItemSelected,Mode=TwoWay}"
IsDragDropEnabled="True"
ItemsSource="{Binding Items,Mode=TwoWay}"
>
</telerik:RadTreeView>

 

this observable collection is fully populated with the items from the database with no problem.

Everything is worinking except for the drag&drop which is only can be done at the first level not on the children

let me show you the code I have to populate the Items (tree datasource), because I have done something extra.

IEnumerable<User> g = await DataService.GetUserGroupsAsync(1);
var t = new ObservableCollection<User>();
foreach (User entity in g)
{
t.Add(entity);
}
   tems = new ObservableCollection<GroupLists>();
GroupLists newList = new GroupLists() { Id = "0", Title = "Root", IsExpanded = true };
   Items.Add(newList);

Items[0].GroupList = t; 

Here I am wrapping the GroupList inside a class to add a root level for my displayed items...

 

does anyone has an explanation for that ....

 

5 Answers, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 02 Nov 2016, 12:13 PM
Hi Yassen,

We weren't able to reproduce the described behavior on our side. Using the provided code snippet we have created a sample project attached. You can modify so it can reproduce it. This way we can directly test it on our side. 

As a side note, in data bound scenario it is best the RadTreeView to be bound to an ObservableCollection. Otherwise, the result of the drag and drop will not be visible. Also, the model of the RadTreeViewItem container where you are trying to drop a dragged item need to have ObservableCollection property or the drop functionality will be not possible. You can take a look at the Drag and Drop help article for more information.

Regards,
Dinko
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
Yassen
Top achievements
Rank 1
answered on 05 Nov 2016, 01:08 PM

Hi Dinko,

Thanks for your rely. the treeview is bounded to ObservableCollection already.

I resolved the drag & drop issue.

I would like to know how to reflect the sortting of treeview items back to dataitem.

I tried to do this in the Drop event and the dataitems were updated, but when I make a loop through the collection it still not sorted even if I do an order-by.

do you have any idea how to achieve that.

Thanks

0
Dinko | Tech Support Engineer
Telerik team
answered on 09 Nov 2016, 12:37 PM
Hello Yassen,

We are happy to hear that you managed to solve the issue which you mentioned in your first post.

As for your second question we have tested it and we weren't able to reproduce it. Basically, when ordering the items in the Items collection of the RadTreeView the collection is properly reordered. Can you update the project in our last reply to reproduce this behavior and send it back to us so we can further investigate it?

In addition, you can take a look at the Implement Search, Filter, and Sort help article where you can read how you can implement sorting on the RadTreeView data.

Regards,
Dinko
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
Yassen
Top achievements
Rank 1
answered on 17 Nov 2016, 01:43 PM

Dear Dinko,

Appreciate your reply.

I wonder how can I add a head for the treeview In your example?

Also the sort I am doing is using a numeric field on the entity, will this be okay to use for sorting.

 

I will try to use your attached example to build another tree from the RIA service, I will come back later with the results.

Best

0
Dinko | Tech Support Engineer
Telerik team
answered on 22 Nov 2016, 08:22 AM
Hello Yassen,

Let us get straight to your questions.

1. I wonder how can I add a head for the In your example? -

We weren't able to fully understood your question. Can you elaborate more on what do you mean by adding a head for the ?

2. Also, the sort I am doing is using a numeric field on the entity, will this be okay to use for sorting. - 

Let us first start with that the RadTreeView doesn't support sorting, searching and filtering of the RadTreeViewItems out-of-the-box.  It visualizes a given collection following user-defined requirements. If you need to show your collection sorted\filtered you will have to sort\filter it manually in code-behind and load it as ItemsSource of the RadTreeView control when it is ready to visualize. In your case, you can sort the tree by a given numeric field from the model and then sets the new sorted collection as an ItemsSource to the RadTreeView control. This approach is described in the article mentioned in our previous post.

Regards,
Dinko
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
TreeView
Asked by
Yassen
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Yassen
Top achievements
Rank 1
Share this question
or