Problems when I programmatically add/remove items to the RadTreeView using ItemsSource

[b]

Hi,

I'm trying to programmatically delete, add and update items in my RadTreeView.

Here's the XAML for my RadTreeView ("TreeEntity") and data template:

<telerik:HierarchicalDataTemplate x:Key="Entity" ItemsSource="{Binding Entities}" telerik:ContainerBinding.ContainerBindings="{StaticResource BindingsCollection}" >
       <StackPanel Orientation="Horizontal">
           <Image Source="{Binding ImageUrl}" />
           <TextBlock Text="{Binding Name}" Margin="5, 0, 0, 0" />
       </StackPanel><br>
</telerik:HierarchicalDataTemplate>

<telerikNavigation:RadTreeView x:Name="TreeEntity" ItemTemplate="{StaticResource Entity}" 
      HorizontalAlignment="Stretch" VerticalAlignment="Top"    
      SelectionChanged="TreeEntity_SelectionChanged">
</telerikNavigation:RadTreeView>

Here is the stub for my data class (an ObservableCollection):

public class EntityHierarchy : ObservableCollection<EntityHierarchy>
    {
        public EntityHierarchy();
        public ToggleState CheckState { get; set; }
        public string Code { get; set; }
        public string Description { get; set; }
        public List<EntityHierarchy> Entities { get; set; }
        public string Id { get; set; }
        public string ImageUrl { get; set; }
        public bool IsExpanded { get; set; }
        public bool IsSelected { get; set; }
        public string Name { get; set; }
        public int NodeLevel { get; set; }
        public string Path { get; set; }
        public int SortOrder { get; set; }
        public string TypeId { get; set; }
    }

I assign an object of type List<EntityHierarchy> to my TreeEntity.ItemsSource.

----------------------
Deleting

Here is the code for deleting (Note, here "itemToProcess" is the EntityHierarchy of the RadTreeViewItem being deleted):

EntityHierarchy parent = ParentItem.DataContext as EntityHierarchy;<br>ParentItem.IsExpanded = false;
for (int i = 0; i < parent.Entities.Count; i++)
{
    if (parent.Entities[i].Id.Equals((itemToProcess as EntityHierarchy).Id, StringComparison.CurrentCultureIgnoreCase))
    {
        parent.Entities.RemoveAt(i);
        break;
    }
}
ParentItem.IsExpanded = true;


Problem with deleting:
When debugging, I see that the correct EntityHierarchy is removed from the parent.Entities, but in the UI the last child of the parent is deleted and the EntityHierarchy that was removed programmatically is still visible (deleted from underlying collection but not correctly picked up by the UI?).

----------------------
Updating/Adding

Here is the code for updating/adding (Note, here "itemToProcess" is the EntityHierarchy of the Parent RadTreeViewItem of the EntityHierarchy item I am updating/adding, and the new/updated EntityHierarchy is retrieved by generateEntityFromPrimaryInstrument()):


RadTreeViewItem item = TreeEntity.ContainerFromItemRecursive(itemToProcess as EntityHierarchy);
if (item != null && item is RadTreeViewItem)
{
    EntityHierarchy parent = item.DataContext as EntityHierarchy;
    EntityRaw entity = generateEntityFromPrimaryInstrument(saveWindow.PrimaryInstrumentToSave);
    if (entity != null)
    {
        List<EntityRaw> EntityRaws = new List<EntityRaw>();
        EntityRaws.Add(entity);
        List<EntityHierarchy> newItem = BuildSubTree(parent.Id, 0, ref EntityRaws);

        if (newItem != null && newItem.Count > 0)
        {
            item.IsExpanded = false;
            EntityHierarchy oldItem = null;

            foreach (EntityHierarchy child in parent.Entities)
                if (child.Id.Equals(newItem[0].Id, StringComparison.CurrentCultureIgnoreCase))
                    oldItem = child;

            if (oldItem != null)
            {
                oldItem.Name = newItem[0].Name;
                oldItem.Description = newItem[0].Description;
                oldItem.NodeLevel = newItem[0].NodeLevel;
                oldItem.SortOrder = newItem[0].SortOrder;
                oldItem.Code = newItem[0].Code;
                oldItem.Path = newItem[0].Path;
            }
            else
                (item.Item as EntityHierarchy).Entities.Add(newItem[0]);
            //parent.Entities.Sort(CompareEntityHierarchiesBySortOrder);
            item.IsExpanded = true;
            return;
        }
    }
}

Problem with updating/adding:
For updating, say I've changed the EntityHierarchy's Name property, the change doesn't show in the UI (still shows the old name).

For adding, when a new EntityHierarchy is added, expanding the parent takes up more space but no text or icon is visible for the new item, as if there's just a blank line that got added (it's not even selectable).

I would greatly appreciate your help in resolving this.

Thanks!

[Petar Mladenov]

Hi b,

In order to immediately reflect a change in its ViewModel, the RadTreeView must be populated with a hierarchy of ObservableCollections which implements both INotifyCollectionChanged and INotifyPropertyChanged.  In your case you child collection is a List and probably this is the problem.
On the other hand , it`s a better practise to have separate classes for a ViewModel that populates the tree and a ViewModel that corresponds to a TreeViewitem. You can find how this could be achieved in the attached solution. In your case your ViewModel  inherits a Collection and has a Collection as a property which may lead to various problems.
Please try to apply the described approach in your scenario ( the most important is to substitute your List with ObservableCollection) and let us know how it goes. We would be glad to advice you further.



Greetings,
Petar Mladenov
the Telerik team

[Nirav Patel]

Hi,
I am facing the similar problem stated in the starting of this thread. The difference in my scenario is that itemssource for the RadTreeView is ObservableCollection.

I have an ObservableCollection "NavigationItems" which is bound to RadTreeView. RadTreeView is applied a hierarchical template. Now on selection of a RadTreeViewItem in the tree, if index of the item is non zero, then I remove the entity from the observable collection and insert it back to the zero th index. So, on selection of each tree view item I set it to the first item in the list.

When I do this normally, it works fine. But if I do select items rapidly, the alignments of RadTreeView get disturbed. This works fine if I don't do Remove and insert of items in observable collection. It I do both remove and insert of items in the observable collection it causes the problem.

Could you please suggest a solution for this?

Thanks & Regards,
Nirav..

[Petar Mladenov]

Hello b,

It is not unusual to get strange behavior of the RadTreeView when you want to rearrange its ItemsSource very quickly on mouse click. We would highly appreciate if you can send us a runnable sample demonstrating the issue you have come up with. This way we could investigate in depth and provide you with a better suited solution or advice.Thank you for your cooperation in advance.

Best wishes,
Petar Mladenov
the Telerik team

[Nirav Patel]

Hi,
First of all thanks for your reply.
I am binding hierarchy of observable collection with the treeview control. When I update the observable collection normally by removing and inserting items which is not a rapid remove add operation the alignments and all remain in tact.

These are the sequence of operation I perform:

NavigationItems is the hierarchical observable collection bound to the tree.
One of the item in the hierarchy has children. I update the sequence of children as:

NavigationItem itemToRemove = some item in the hierarchy from observable collection named NavigationItems

item.Chilren.Remove(itemToRemove);
item.Children.Insert(0, itemToRemove);

I do above operatioon on TreeItem click. If I click multiple items rapidly there seems to be a problem. Entire tree get into a misaligned state.

Can you please help me in this,,

Thanks & Regards,

Nirav Patel

[Petar Mladenov]

Hi Nirav Patel,

Could you please test the attached example and let me know if it works in your scenario or if I am missing something. When you click on a root-level Item, its children are rearranged. When you click faster the double click of the RadTreeViewItem and the double click of the RadTreeView fires and the clicked Item is collapsed, which is expected. You can modify the solution and send it back to me in order to show the issue you have come up with. Thank you for your cooperation.

Greetings,
Petar Mladenov
the Telerik team

[Nirav Patel]

Hi Petar,
Thanks for your support. I am implementing the similar feature as you have shown in the sample application. But for some reason the same is maligning the arrangement of TreeView items in the tree. The only difference in your sample and my application is the amount of items in the observable collection. In my case there are more than 100 items in the observable collection. Can that be a problem?

Thanks & Regards,
Nirav

[Petar Mladenov]

Hi Nirav Patel,

Well, I tested my application with thousands of Items and worked as expected. I even turned on virtualization and started to rearrange items that are outside the visual appearance of the tree ( below the screen ). Still I haven't found something unexpected. Could you try to modify my application in order to show your issue. It shouldn't be a problem since the solutions are similar as you said. I can also create a support ticket for you if posting your project in a forum embarrasses you or your company. Thank you for your cooperation again.

Regards,
Petar Mladenov
the Telerik team