WPF RadTreeView operations using MVVM pattern

[sonal]

Hi,
  We are using telerik treeview along with MVVM pattern in a WPF application. The view model exposes an observable collection to which nodes in the tree bound to. Also, viewmodel exposes the commands required to add delete and edit nodes in the tree.

I think, When i add/remove an item in the observable collection it should get reflected in the tree but my concern is, will it preserve the state of expanded tree node after its child nodes are modified?

Also i need to add (drop) a node in the treeview by dragging it from another tree or any other control.

I have few queries:
1. Can you please provide us a sample for add/edit/delete node and drag/drop? It will be great if sample uses MVVM pattern.
2. How theses operations in RadTreeVIew are diffrent/easy as comapred to when i use WPF standard treeview
3.  Can you please shed some light on UI virtualization support in telerik wpf treeview?

Thanks
Sonal

[Ivan]

Hello Sonal,

Thank you for contacting Telerik Support.

Attached you can find an example project where the RadTreeView is bound to an ObservableCollection. Please give it a try.

About virtualization - this is already provided by the framework.

Sincerely yours,
Ivan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[sonal]

Hi,
    This sample does not compile, please check.

Thanks
Sonal

[Ivan]

Hi Sonal,

Indeed, the sample we provided is in Silverlight, but there are almost no differences between RadControls for WPF and Silverlight. For example the only difference in attached example is the definition of the HierarchicalDataTemplate class - in WPF it is defined in the framework but in Silverlight it is inside RadControls library.

Attached you can find the same example in WPF. Please recreate the references to the Telerik assemblies in order to compile the code.

Kind regards,
Ivan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[YYZRichard]

I often forgot to "RaisePropertyChanged" when I started using MVVM, and that can affect the way the controls behave. You need to notify the property to which the TreeView is binding to, in the code below look for "RaisePropertyChanged".
In the example below, I'm binding the TreeView to an XML Document coming from SQL Server, depending on the node clicked, I have to refresh the content of a Grid, so I retrieve the Grid Content related to the node clicked, and "RaisePropertyChanged" for the property bound to the Grid, that causes the grid to refresh when a tree node is clicked.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel.Composition;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Description;
using System.Text;
using System.Xml;
using System.Xml.XPath;
using System.Windows.Data;
using System.Windows.Controls;
using System.Windows.Input;
using Microsoft.Practices.Prism.Commands;
using Microsoft.Practices.Prism.Events;
using Microsoft.Practices.Prism.Regions;
using Microsoft.Practices.Prism.ViewModel;

    [Export(typeof(FrontlineViewModel))]
    [PartCreationPolicy(CreationPolicy.NonShared)]
    public class YourViewModel : NotificationObject

        private readonly IEventAggregator eventAggregator;
        private readonly IRegionManager regionManager;

        [ImportingConstructor]
        public YourViewModel(IRegionManager regionManager, IEventAggregator eventAggregator)
        {
            // Event Aggregator
            this.eventAggregator = eventAggregator;

            // Region Manager
            this.regionManager = regionManager;
         }

         public XmlDocument Tree { get; set; }
         public XmlDocument Grid { get; set; }

        /// <summary>
        /// Holds the value of the TreeSelectedItem property.
        /// </summary>
        private System.Xml.XmlElement treeSelectedItem;

        /// <summary>
        /// Property to hold the selected item of the TreeView.
        /// </summary>
        public System.Xml.XmlElement TreeSelectedItem
        {
            get { return treeSelectedItem; }
            set
            {
                treeSelectedItem = value;

                // Do something here with the SelectedItem

                // Raise any properties change, in the example below I'm raising the property used to refresh a grid on the view
                this.RaisePropertyChanged(() => this.Grid);

                // You may want to raise this property as well, case another member is dependant on this property.
                this.RaisePropertyChanged(() => this.TreeSelectedItem);
            }
        }

}

}

[Petar Mladenov]

Hi YYZRichard,

Thank you for your interest in our controls and especially for your feedback. I`m sure the community will appreciate it.

Regards,
Petar Mladenov
the Telerik team