|
1 | | -# How-to-bind-the-selecteditem-in-wpf-treeview-control- |
2 | | -This session explains about how to bind the selecteditem in wpf treeview control? |
| 1 | +# How to bind the SelectedTreeItem to WPF TreeViewAdv? |
3 | 2 |
|
4 | | -KB article - [How-to-bind-the-selecteditem-in-wpf-treeview-control](https://www.syncfusion.com/kb/11636/how-to-bind-the-selecteditem-to-wpf-treeview-control) |
| 3 | +Follow the below steps to bind the [SelectedTreeItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TreeViewAdv.html#Syncfusion_Windows_Tools_Controls_TreeViewAdv_SelectedTreeItem) using MVVM in [WPF TreeViewAdv](https://help.syncfusion.com/wpf/classic/treeview/overview). |
| 4 | + |
| 5 | +**Step 1:** Create a Model class to responsible for exposing data from the ViewModel. |
| 6 | + |
| 7 | +**Step 2:** Create a view model class and add the properties to bind the values. |
| 8 | + |
| 9 | +**Step 3:** Define the TreeViewAdv control and bind the SelectedTreeItem and ItemSource property. |
| 10 | + |
| 11 | +**Step 4:** Set the DataContext and ItemTemplate of TreeViewAdv to appear the appropriate items. |
| 12 | + |
| 13 | +```xml |
| 14 | +<Grid> |
| 15 | + <syncfusion:TreeViewAdv x:Name="TreeViewAdv" |
| 16 | + AllowMultiSelect="True" |
| 17 | + ItemsSource="{Binding TreeItems}" |
| 18 | + SelectedTreeItem="{Binding SelectedItem, Mode=TwoWay}" |
| 19 | + Width="150" |
| 20 | + Height="150"> |
| 21 | + <syncfusion:TreeViewAdv.DataContext> |
| 22 | + <local:ViewModel /> |
| 23 | + </syncfusion:TreeViewAdv.DataContext> |
| 24 | + <syncfusion:TreeViewAdv.ItemTemplate> |
| 25 | + <HierarchicalDataTemplate> |
| 26 | + <TextBlock Text="{Binding Header}" /> |
| 27 | + </HierarchicalDataTemplate> |
| 28 | + </syncfusion:TreeViewAdv.ItemTemplate> |
| 29 | + </syncfusion:TreeViewAdv> |
| 30 | +</Grid> |
| 31 | +``` |
| 32 | + |
| 33 | +```csharp |
| 34 | +public class ViewModel |
| 35 | +{ |
| 36 | + public ObservableCollection<Model> TreeItems { get; set; } |
| 37 | + public object SelectedItem { get; set; } |
| 38 | + |
| 39 | + public ViewModel() |
| 40 | + { |
| 41 | + TreeItems = PopulateData(); |
| 42 | + SelectedItem = TreeItems[1]; // Sets "Calendar" as the initially selected item. |
| 43 | + } |
| 44 | + |
| 45 | + private ObservableCollection<Model> PopulateData() |
| 46 | + { |
| 47 | + TreeItems = new ObservableCollection<Model>(); |
| 48 | + TreeItems.Add(new Model() { Header = "Mailbox" }); |
| 49 | + TreeItems.Add(new Model() { Header = "Calendar" }); |
| 50 | + TreeItems.Add(new Model() { Header = "Contacts" }); |
| 51 | + TreeItems.Add(new Model() { Header = "Drafts" }); |
| 52 | + TreeItems.Add(new Model() { Header = "Parent1" }); |
| 53 | + return TreeItems; |
| 54 | + } |
| 55 | +} |
| 56 | +``` |
| 57 | + |
| 58 | +```csharp |
| 59 | +public class Model |
| 60 | +{ |
| 61 | + public string Header { get; set; } |
| 62 | +} |
| 63 | +``` |
0 commit comments