HierarchicalDataTemplate Drag & Drop

6 posts, 0 answers
  1. Yassen
    Yassen avatar
    3 posts
    Member since:
    Oct 2016

    Posted 28 Oct Link to this post

    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 ....

     

  2. Dinko
    Admin
    Dinko avatar
    204 posts

    Posted 02 Nov Link to this post

    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.
  3. DevCraft banner
  4. Yassen
    Yassen avatar
    3 posts
    Member since:
    Oct 2016

    Posted 05 Nov in reply to Dinko Link to this post

    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

  5. Dinko
    Admin
    Dinko avatar
    204 posts

    Posted 09 Nov Link to this post

    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.
  6. Yassen
    Yassen avatar
    3 posts
    Member since:
    Oct 2016

    Posted 17 Nov in reply to Dinko Link to this post

    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

  7. Dinko
    Admin
    Dinko avatar
    204 posts

    Posted 22 Nov Link to this post

    Hello Yassen,

    Let us get straight to your questions.

    1. I wonder how can I add a head for the treeview 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 treeview?

    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.
Back to Top
DevCraft banner