This is a migrated thread and some comments may be shown as answers.

Programmatically Create an ItemTemplate

2 Answers 307 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 1
Jacob asked on 13 Jan 2020, 08:37 PM

I'm essentially trying to recreate the xaml below from your example here. I've been successful in creating a Tree View and a TreeViewDescriptor using only C# (no xaml) but I haven't been able to figure out how to create a more complex Tree View using an Item Template. The ItemTemplate property for a TreeViewDescriptor has a type of DataTemplate and that class only seems to have the properties Values and Bindings. These properties wouldn't be enough for me to define my grid for displaying my data. Am I able to define an ItemTemplate programmatically?  

1.
<telerikDataControls:RadTreeView  x:Name="treeView"
                                  ItemsSource="{Binding Source}">
    <telerikDataControls:TreeViewDescriptor DisplayMemberPath="Name"
                                            ItemsSourcePath="Cities"
                                            TargetType="{x:Type local:Country}">
        <telerikDataControls:TreeViewDescriptor.ItemTemplate>
            <DataTemplate>
                <Grid Margin="{Binding Path=Level, Converter={StaticResource levelToMarginConverter}}"
                      HeightRequest="40">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <telerikTreeView:ExpandCollapseIndicator FontSize="Medium"
                                                             WidthRequest="10"
                                                             Margin="15,0"
                                                             VerticalTextAlignment="Center"
                                                             IsLoading="{Binding Path=IsLoading}"
                                                             IsLoadOnDemandEnabled="{Binding Path=IsLoadOnDemandEnabled}"
                                                             IsExpanded="{Binding Path=IsExpanded}"
                                                             IsLeaf="{Binding Path=IsLeaf}" />       
                    <Image Grid.Column="1"
                           VerticalOptions="Center"
                           Source="{Binding Item.Icon, Converter={StaticResource ImageSourceConverter}}" />
                    <telerikTreeView:ItemText Grid.Column="2"
                                       Margin="8,0,0,0"
                                       VerticalOptions="Center"
                                       Text="{Binding Item.Name}" />
                </Grid>
            </DataTemplate>
        </telerikDataControls:TreeViewDescriptor.ItemTemplate>
    </telerikDataControls:TreeViewDescriptor>
    <telerikDataControls:TreeViewDescriptor DisplayMemberPath="Name"
                                            TargetType="{x:Type local:City}" />
</telerikDataControls:RadTreeView>

2 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 14 Jan 2020, 03:24 PM

Hi Jacob,

RadTreeView does not require a specific structure inside the ItemTemplate, so you can apply it to a DataTemplate and directly put content inside it, check below a simple example:

public RadTreeView CreateTreeView()
{
    var treeView = new RadTreeView();

    var firstItemDescriptor = new TreeViewDescriptor()
    {
        DisplayMemberPath = "Name",
        TargetType = typeof(Country)
    };

    firstItemDescriptor.ItemTemplate = new DataTemplate(() =>
    {
        var grid = new Grid();

        var nameLabel = new Label { FontAttributes = FontAttributes.Bold };
        nameLabel.SetBinding(Label.TextProperty, "Item.Name");
        grid.Children.Add(nameLabel);

        return grid;
    });          

    treeView.Descriptors.Add(firstItemDescriptor);

    treeView.ItemsSource = new ObservableCollection<Country>
    {
        new Country() { Name = "Italy"},
        new Country() { Name = "Germany"},
        new Country() { Name = "USA"}
    };

    return treeView;
}
}

You can also take a look at the following article which shows how you can create a general Xamarin.Forms DataTemplate: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/creating

I hope I was of help. Let me know if any additional questions pop up.

Regards,
Yana
Progress Telerik

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 Feedback Portal and vote to affect the priority of the items
0
Jacob
Top achievements
Rank 1
answered on 14 Jan 2020, 08:37 PM
This was exactly what I needed, thank you!
Tags
TreeView
Asked by
Jacob
Top achievements
Rank 1
Answers by
Yana
Telerik team
Jacob
Top achievements
Rank 1
Share this question
or