We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

HOW TO TRAVERSE PARENT NODES USING BUTTONS

I am trying to achieve following : 

  • Parent 1
  • Parent 2
  • Parent 3
  • Parent 4
if current selected Node is Parent1 and user presses Next Button I want Parent2 node to be selected node. How do I achieve this using MVVM ? 


Thanks

1 Reply

VR Vijayalakshmi Roopkumar Syncfusion Team September 18, 2017 10:19 AM UTC

Hi Rahul,

Thank you for contacting Syncfusion Support.

We have prepared the sample that tries to meet your requirement. In our sample, we have added the items using the MVVM pattern and also change the SelectedTreeItem based on user need. Please find the code example for the same from below: 
XAML: 
 
<syncfusion:TreeViewAdv x:Name="TreeViewone"  ItemsSource="{Binding TreeItems}" SelectedTreeItem="{Binding SelectedTreeItem, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Grid.Row="0"> 
 
<syncfusion:TreeViewAdv.ItemTemplate> 
 
<HierarchicalDataTemplate ItemsSource="{Binding SubItems}"> 
 
<TextBlock Text="{Binding Header}" /> 
 
</HierarchicalDataTemplate> 
 
</syncfusion:TreeViewAdv.ItemTemplate> 
 
</syncfusion:TreeViewAdv> 
 
 
 
C#: 
 
public class ViewModel : INotifyPropertyChanged 
{ 
public commandclass TraverseSelectedTreeItem { get; set; } 
public ViewModel() 
 
{ 
 
TreeItems = new ObservableCollection<Model>(); 
 
PopulateData(); 
//Intialize the command 
this.TraverseSelectedTreeItem = new commandclass(CanTraverseSelectedTreeItem, ExecuteTraverseSelectedTreeItem); 
 
 
} 
 
//Execute when the button clicks 
private void ExecuteTraverseSelectedTreeItem(object obj) 
{ 
TreeViewAdv item = obj as TreeViewAdv; 
 
if (item.SelectedTreeItem == TreeItems[0]) 
{ 
item.ClearSelection(); 
item.SelectedTreeItem = TreeItems[1]; 
} 
 
 
} 
 
private bool CanTraverseSelectedTreeItem(object obj) 
{ 
return true; 
} 
 
 
private object selectedtreeitem; 
public object SelectedTreeItem 
{ 
get 
{ 
return selectedtreeitem; 
} 
set 
{ 
selectedtreeitem = value; 
NotifyPropertyChanged("SelectedTreeItem"); 
 
 
 
} 
} 
public ObservableCollection<Model> TreeItems { get; set; } 
 
 
//Used to populate the items 
private void PopulateData() 
 
{ 
 
Model Root1 = new Model() { Header = "Parent1" }; 
 
PopulateSubItems(Root1); 
 
TreeItems.Add(Root1); 
 
Model Root2 = new Model() { Header = "Parent2" }; 
 
PopulateSubItems(Root2); 
 
TreeItems.Add(Root2); 
 
Model Root3 = new Model() { Header = "Parent3" }; 
 
PopulateSubItems(Root3); 
 
TreeItems.Add(Root3); 
 
Model Root4 = new Model() { Header = "Parent4" }; 
 
PopulateSubItems(Root4); 
 
TreeItems.Add(Root3); 
 
Model Root5 = new Model() { Header = "Parent5" }; 
 
PopulateSubItems(Root5); 
 
TreeItems.Add(Root3); 
 
} 
 
//Used the Populate the subitems 
private void PopulateSubItems(Model Root) 
 
{ 
 
Model SubItem1 = new Model() { Header = Root.Header + " Item1" }; 
 
Model SubItem2 = new Model() { Header = Root.Header + " Item2" }; 
 
Model SubItem3 = new Model() { Header = Root.Header + " Item3" }; 
 
Model SubItem4 = new Model() { Header = Root.Header + " Item4" }; 
 
Root.SubItems.Add(SubItem1); 
 
Root.SubItems.Add(SubItem2); 
 
Root.SubItems.Add(SubItem3); 
 
Root.SubItems.Add(SubItem4); 
 
} 
 
//INotifyPropertyChanged 
public event PropertyChangedEventHandler PropertyChanged; 
private void NotifyPropertyChanged(String info) 
{ 
if (PropertyChanged != null) 
{ 
PropertyChanged(this, new PropertyChangedEventArgs(info)); 
} 
} 
 
} 
 
 

Please try this solution and let us know if it is helpful

Regards,
Vijayalakshmi V.R.
 


Loader.
Live Chat Icon For mobile
Up arrow icon