[Solved] Not able to bind data via ItemsSource

[Sathya Prasaad]

Hi,

I am somehow struggling with this treeview for quite sometime now.. I am trying to bind a list to the ItemsSource property of the Treeview. But it never returns data. Please note that I want the treeview to be populated only on click of a button and not during page load. Please find below the CS and XAML code. Please let me know what am doing wrong here

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Telerik.Windows.Controls.DragDrop;

using System.Collections.ObjectModel;

using System.ComponentModel;

namespace SilverlightApplication2

{

public partial class MainPage : UserControl,INotifyPropertyChanged

{

private List<ProvHeader> treeDataSource;

// Declare the PropertyChanged event

public event PropertyChangedEventHandler PropertyChanged;

public List<ProvHeader> TreeDataSource

{

get { return this.treeDataSource; }

set

{

if (this.treeDataSource == value)

return;

this.treeDataSource = value;

this.OnPropertyChanged(new PropertyChangedEventArgs("TreeDataSource"));

}

}

public MainPage()

{

InitializeComponent();

}

// NotifyPropertyChanged will raise the PropertyChanged event passing the

// source property that is being updated.

protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)

{

if (this.PropertyChanged != null)

this.PropertyChanged(this, e);

}

private void GetData_Click(object sender, RoutedEventArgs e)

{

List<ProvHeader> pl = new List<ProvHeader>();

ProvHeader p;

PaytoProv p2p;

Provider child;

pl.Add(p = new ProvHeader("Manager"));

p.PaytoProviders.Add(p2p = new PaytoProv("Programmer"));

p2p.Providers.Add(new Provider("ModuleLead"));

p2p.Providers.Add(child = new Provider("Test2"));

p2p.Providers.Add(child = new Provider("Test3"));

p2p.Providers.Add(child = new Provider("Test4"));

TreeDataSource = pl;

//ProviderTreeView.ItemsSource = TreeDataSource;

}

}

public class Provider

{

public Provider(string name)

{

this.Name = name;

}

public string Name

{

get;

set;

}

}

public class PaytoProv

{

public PaytoProv(string name)

{

this.Name = name;

this.Providers = new List<Provider>();

}

public string Name

{

get;

set ;

}

public List<Provider> Providers

{

get;

set;

}

}

public class ProvHeader

{

public ProvHeader(string name)

{

this.Name = name;

this.PaytoProviders = new List<PaytoProv>();

}

public string Name

{

get;

set;

}

public List<PaytoProv> PaytoProviders

{

get;

set;

}

}

}

<UserControl x:Class="SilverlightApplication2.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:panels="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls" xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls" xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:modules="clr-namespace:SilverlightApplication2" xmlns:local="clr-namespace:SilverlightApplication2" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <UserControl.Resources> <local:getdata x:Name="dsource"/> <telerik:HierarchicalDataTemplate x:Key="Provider"> <TextBlock Text="{Binding Name}" /> </telerik:HierarchicalDataTemplate> <telerik:HierarchicalDataTemplate x:Key="PaytoProvider" ItemTemplate="{StaticResource Provider}" ItemsSource="{Binding Providers}"> <TextBlock Text="{Binding Name}" /> </telerik:HierarchicalDataTemplate> <telerik:HierarchicalDataTemplate x:Key="ProviderHeader" ItemTemplate="{StaticResource PaytoProvider}" ItemsSource="{Binding PaytoProviders}"> <TextBlock Text="{Binding Name}" /> </telerik:HierarchicalDataTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="80*"/> <RowDefinition Height="20*"/> </Grid.RowDefinitions> <telerikNavigation:RadTreeView ItemTemplate="{StaticResource ProviderHeader}" ItemsSource ="{Binding Path=TreeDataSource}" Grid.Row="0" SelectionMode="Single" IsTriStateMode="False" IsOptionElementsEnabled="True" Height="250" IsLineEnabled="True" IsRootLinesEnabled="False" Margin="10" x:Name="ProviderTreeView" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Center"> </telerikNavigation:RadTreeView> <Button Content="Get Data" Height="50" Width="100" x:Name="GetData" Click="GetData_Click" Grid.Row="1"/> </Grid> </UserControl>

[Tina Stancheva]

Hello Sathya Prasaad,

I noticed that you have commented the following line in your code:

private void GetData_Click(object sender, RoutedEventArgs e)
       {
           List<ProvHeader> pl = new List<ProvHeader>();
           ProvHeader p;
           PaytoProv p2p;
           Provider child;
           pl.Add(p = new ProvHeader("Manager"));
           p.PaytoProviders.Add(p2p = new PaytoProv("Programmer"));
           p2p.Providers.Add(new Provider("ModuleLead"));
           p2p.Providers.Add(child = new Provider("Test2"));
           p2p.Providers.Add(child = new Provider("Test3"));
           p2p.Providers.Add(child = new Provider("Test4"));
           TreeDataSource = pl;
           //ProviderTreeView.ItemsSource = TreeDataSource;

       }

If you uncomment it everything should work as expected.

I also noticed that you set the ItemsSource of the RadTreeView in XAML. You don't need to set it there since you need the TreeView to be populated with items when the appropriate button is clicked.

I prepared a sample project for you. Please take a look at it and let me know if this is what you had in mind or if you need more info.

Sincerely yours,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sathya Prasaad]

Thanks for your response Tina!! I did comment out that piece of code intentionally. We are right now working on a MVVM model and we don't want to set the item source in the .CS file. We would like to bind it in the XAML. And whenever the List that is bound to the treeview changes, I was expecting the change to get reflected in the UI. This is what is not happening. Hope that is achievable. 

[Tina Stancheva]

Hello Sathya Prasaad,

Thank you for clearing this out.

In this case you will only need to change the type of your collection. When you're using a List collection, the changes you make to the RadTreeView ItemsSource don't affect the original business object and vice versa. Therefore you should use ObservableCollection instead of List and implement INotifyPropertyChanged in your data classes. You can take a look at the RadTreeViewExample project that illustrates this approach.

Still, if you need to populate the TreeView on a button click and use MVVM, you can bind the Command property of the Button to an appropriate property in your model. I modified your project (308990_TreeViewItemsSource) to illustrate this approach.

Please let me know if I can further assist you.

Greetings,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.