Treeview with custom data source and child

[Michele]

Hello to everybody...
I've got the following code :

 <Grid.Resources>
           <core:HierarchicalDataTemplate x:Key="TopItem">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Tag="{Binding FunctionName}">
                    <Image Source="{Binding ImageURL}" Margin=" 0,0,6,0" />
                    <HyperlinkButton x:Name="htmenuNavigation" Click="htmenuNavigation_Click"  Tag="{Binding UserControl}"  VerticalAlignment="Center">
                        <TextBlock Text="{Binding Name}" Foreground="LightBlue" FontWeight="Bold" FontSize="15"/>
                    </HyperlinkButton>

                </StackPanel>
            </core:HierarchicalDataTemplate>
        </Grid.Resources>

That represent the items of this format  :

 public class MenuItem
    {
        public string Name { get; set; }
        public string ImageURL { get; set; }
        public string UserControl { get; set; }
        public string FunctionName { get; set; }
    }

And on the treeview's load I've :

        private void menuTreeView_Loaded(object sender, RoutedEventArgs e)
        {
            List<MenuItem> items = new List<MenuItem>();
            items.Add(new MenuItem { Name = "name1", ImageURL = "./Images/calendar.png", UserControl = "UC_1", FunctionName = "FUNCTION1" });
            items.Add(new MenuItem { Name = "name2", ImageURL = "./Images/search.png", UserControl = "UC_2", FunctionName = "FUNCTION2" });

            MenuItem item1= new MenuItem { Name = "name3", ImageURL = "./Images/contoterzi.png", UserControl = "UC_3", FunctionName = "FUNCTION3" };

            items.Add(item1);
            menuTreeView.ItemsSource = items;
        }

It shows a treeview with a picture and a link for direct jump...
Now I need to add some chidren menu to an item and showing the "expand" button.... how can I achive this ? I think I've to add a children element of type MenuItem to the MenuItem Object, but I'm lost in the template format....

Thanks in advance
Paolo

[Kiril Stanoev]

Hello Paolo,

You are on the right track when using a HierarchicalDataTemplate. What you have to do right now is to add a Children collection to MenuItem and give this Children collection as an ItemsSource to the HierarchicalDataTemplate. Also, you need to specify an ItemTemplate that will serve as a template for the items in the HierarchicalDataTemplate.

public class MenuItem
{
    public MenuItem()
    {
        Children = new ObservableCollection<MenuItem>();
    }

    public string Name { get; set; }
    public string ImageURL { get; set; }
    public string UserControl { get; set; }
    public string FunctionName { get; set; }
    public ObservableCollection<MenuItem> Children { get; set; }
}

<DataTemplate x:Key="InnerItem">
    <StackPanel>
    <!-- here you specify how the sub-item templace will look like -->
    </StackPanel>
</DataTemplate>

<core:HierarchicalDataTemplate x:Key="TopItem" ItemsSource="{Binding Children}"
    ItemTemplate="{StaticResource InnerItem}">
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Tag="{Binding FunctionName}">
        <Image Source="{Binding ImageURL}" Margin=" 0,0,6,0" />
        <HyperlinkButton x:Name="htmenuNavigation" Click="htmenuNavigation_Click" Tag="{Binding UserControl}" VerticalAlignment="Center">
            <TextBlock Text="{Binding Name}" Foreground="LightBlue" FontWeight="Bold" FontSize="15" />
        </HyperlinkButton>
    </StackPanel>
</core:HierarchicalDataTemplate>

Finally, you need to populate your items collection properly:

private void menuTreeView_Loaded(object sender, RoutedEventArgs e)
{
    ObservableCollection<MenuItem> items = new ObservableCollection<MenuItem>();
    items.Add(new MenuItem { Name = "name1", ImageURL = "Images/calendar.png", UserControl = "UC_1", FunctionName = "FUNCTION1" });
    items.Add(new MenuItem { Name = "name2", ImageURL = "Images/mail.png", UserControl = "UC_2", FunctionName = "FUNCTION2" });
    MenuItem item3 = new MenuItem { Name = "name3", ImageURL = "Images/folders.png", UserControl = "UC_3", FunctionName = "FUNCTION3" };
    MenuItem subItem31 = new MenuItem { Name = "name3.1", ImageURL = "Images/notes.png", UserControl = "UC_3.1", FunctionName = "FUNCTION3.1" };
    items.Add(item3);
    item3.Children.Add(subItem31);
    menuTreeView.ItemsSource = items;
}

I am attaching a sample project demonstrating the above functionality. Give it a try and let me know how it works for you. Also, you can take a look at the Hierarchical Template examples of RadTreeView.

Best wishes,
Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.