Getting Started

This article will guide you through the steps needed to add a basic RadTreeView control in your application.

1. Setting up the app

Take a look at these articles and follow the instructions to setup your app:

2. Adding the required Telerik references

You have two options:

  • Add the Telerik UI for Xamarin Nuget packages following the instructions in Telerik NuGet package server topic.

  • Add the references to Telerik assemblies manually, check the list below with the required assemblies for RadTreeView component:

Platform Assemblies
Portable/Standard Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataControls.dll
Telerik.XamarinForms.Primitives.dll
Android Telerik.Xamarin.Android.Common.dll
Telerik.Xamarin.Android.Data.dll
Telerik.Xamarin.Android.Input.dll
Telerik.Xamarin.Android.List.dll
Telerik.Xamarin.Android.Primitives.dll
Telerik.XamarinForms.Primitives.dll
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataControls.dll
iOS Telerik.Xamarin.iOS.dll
Telerik.XamarinForms.Primitives.dll
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataControls.dll
UWP Telerik.Core.dll
Telerik.Data.dll
Telerik.UI.Xaml.Controls.Data.UWP.dll
Telerik.UI.Xaml.Input.UWP.dll
Telerik.UI.Xaml.Primitives.UWP.dll
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.DataControls.dll
Telerik.XamarinForms.Primitives.dll

3. Adding RadTreeView control

You could use one of the following approaches:

Drag the control from the Toolbox.

Take a look at the following topics on how to use the toolbox:

Create the control definition in XAML:

<dataControls:RadTreeView x:Name="tv" ItemsSource="{Binding SourceCollection}"/>

In addition to this, you need to add the following namespace:

xmlns:dataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

As you can notice, the ItemsSource property of the control needs to be set. The collection we have is representing a hierarchical view and this is the reason for using the RadTreeView control for this setup. Here is how a single item from the collection is created:

            this.SourceCollection.Add(new Item()
            {
                Name = "Item 1",
                Children = new List<Item>()
                    {
                        new Item()
                        {
                            Name = "Item 11",
                            Children = new ObservableCollection<Item>()
                            {
                                new Item()
                                {
                                    Name = "Item 111",
                                },
                                new Item()
                                {
                                    Name = "Item 112"
                                },
                                new Item()
                                {
                                    Name = "Item 113"
                                }
                            }
                        },
                        new Item()
                        {
                            Name = "Item 12"
                        }
                    }
            });

An important step for the control to load its items correctly is to apply TreeViewDescriptor(s). The TreeViewDescriptor basically defines the data items' hierarchy as well as how each item is visualized through the properties listed below:

  • TargetType - the type of the data item the descriptor refers to;
  • DisplayMemberPath - the name of the property that is displayed for this data item;
  • ItemsSourcePath - the path to the list containing the sub items;
  • ItemTemplate - you could customize the visual appearance of each item type through the ItemTemplate property of the descriptor;

Here is an example how the TreeViewDescriptor is applied:

<dataControls:RadTreeView x:Name="tv" ItemsSource="{Binding SourceCollection}">
    <dataControls:TreeViewDescriptor DisplayMemberPath="Name"
                                     ItemsSourcePath="Children"
                                     TargetType="{x:Type local:Item}"/>
</dataControls:RadTreeView>

Where the Item class is defined as:

    public class Item : INotifyPropertyChanged
    {
        string name;
        public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                if (this.name != value)
                {
                    this.name = value;
                    this.OnPropertyChanged();
                }
            }
        }

        public IList<Item> Children { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        public Item()
        {
            this.Children = new ObservableCollection<Item>();
        }

        public void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var eh = this.PropertyChanged;
            if (eh != null)
                eh.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public override string ToString()
        {
            return this.Name;
        }
    }

Here is the appearance of the RadTreeView control once the upper steps have been accomplished:

getting started treeview

You can check a runnable demo in the Features section of the RadTreeView component in the SDK Samples Browser application(can be found in the Examples folder of your local Telerik UI for Xamarin installation)

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy