TreeView Template Binding - Property Not Found

[Raymond]

Using the following;

<telerikDataControls:RadTreeView
    x:Name="treeView"
    Grid.Row="1"
    Grid.Column="0"
    Grid.ColumnSpan="3"
    ItemsSource="{Binding RunList}">
    <telerikDataControls:TreeViewDescriptor
        DisplayMemberPath="RunStart"
        TargetType="{x:Type viewModels:DriverRunVm}"
        ItemsSourcePath="Jobs">
    </telerikDataControls:TreeViewDescriptor>

    <telerikDataControls:TreeViewDescriptor DisplayMemberPath="JobLine1" TargetType="{x:Type viewModels:JobVm}"/>
</telerikDataControls:RadTreeView>

 

The treeview displays the "RunStart" value in the header followed by the list of Jobs.  If I change this to;

<telerikDataControls:RadTreeView
    x:Name="treeView"
    Grid.Row="1"
    Grid.Column="0"
    Grid.ColumnSpan="3"
    ItemsSource="{Binding RunList}">
    <telerikDataControls:TreeViewDescriptor
        DisplayMemberPath="RunStart"
        TargetType="{x:Type viewModels:DriverRunVm}"
        ItemsSourcePath="Jobs"
        ItemTemplate="{StaticResource RunHeaderTemplate}">
    </telerikDataControls:TreeViewDescriptor>

    <telerikDataControls:TreeViewDescriptor DisplayMemberPath="JobLine1" TargetType="{x:Type viewModels:JobVm}"/>
</telerikDataControls:RadTreeView>

 

And use this template;

<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="RunHeaderTemplate">
            <Grid
                BackgroundColor="#ffb999"
                RowSpacing="0"
                Padding="5,2,5,0"
                Margin="0">

                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Label
                    Grid.Row="0"
                    Grid.Column="0"
                    Text="Start:"
                    TextColor="{StaticResource DarkSlateGrey}"
                    FontSize="17"
                    Margin="0"
                    HorizontalOptions="End"
                    VerticalOptions="CenterAndExpand"/>

                <Label
                    Grid.Row="0"
                    Grid.Column="1"
                    Text="{Binding RunStart}"
                    TextColor="{StaticResource DarkSlateGrey}"
                    FontSize="17"
                    Margin="0"
                    HorizontalOptions="Start"
                    VerticalOptions="CenterAndExpand"/>
            </Grid>
        </DataTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

 

The label "Start:" is displayed however the error "[0:] Binding: 'RunStart' property not found on 'Telerik.XamarinForms.DataControls.TreeView.TreeViewDataItem', target property: 'Xamarin.Forms.Label.Text'" is reported.

I have tried using "treeView:ItemText" instead of a label but I get the same error.  So I don't understand how the "DisplayMemberPath" displays the start value correctly but the same property in the template doesn't work.

[Raymond]

In case it helps, this is class the TreeView is bound to;

public class DriverRunVm : ObservableCollection<JobVm>, INotifyPropertyChanged
{
    private readonly Run run;

    public DriverRunVm(Run run)
    {
        this.Jobs = new ObservableCollection<JobVm>();
        this.run = run;
        run.PropertyChanged += PropertyUpdated;
    }
    public ObservableCollection<JobVm> Jobs { get; set; }
    public string RunId { get { return run.Id; } }
    public DateTime RunStartDt { get { return run.RunStart.UtcDateTime.ToLocalTime(); } }
    public string RunStart { get { return FormatDate(RunStartDt); } }
    public DateTime RunFinishDt { get { return run.RunFinish.UtcDateTime.ToLocalTime(); } }
    public string RunFinish { get { return FormatDate(RunFinishDt); } }

    private string FormatDate(DateTime value)
    {
        return $"{value.ToString("ddd, d MMM yyyy").Replace(".", "")} - {value.ToString("h:mmtt").ToLower()}";
    }

    private void PropertyUpdated(object sender, PropertyChangedEventArgs e)
    {
        OnPropertyChanged(e);
    }
}

[Yana]

Hello Raymond,

Thank you for sending the snippets.

In order to bind to the treeview item properties in the ItemTemplate, you would need to use Item property. So, in the concrete case, the Label binding should be like this:

<Label
    Grid.Row="0"
    Grid.Column="1"
    Text="{Binding Item.RunStart}"
    TextColor="Gray"
    FontSize="17"
    Margin="0"
    HorizontalOptions="Start"
    VerticalOptions="CenterAndExpand"/>

This is needed as the binding context of the template is of type TreeViewDataItem which contains additional properties related to the item such as Level, IsExpanded, IsLeaf and other. The business object is wrapped inside Item property.

Please try it and let me know if you experience any additional issues.

Regards,
Yana
Progress Telerik

[Raymond]

Hi Yana,

That worked but can I suggest the documentation is updated to make this clear. The only reference I found to this was in the documentation here;

<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}" />

 

Where I presumed "Item" was actually part of your view model - not the TreeViewDataItem.

And in the API documentation;

Item
Gets the business object from the ItemsSource.

Neither of which makes it clear that the bindings must all be prefixed with "Item." in the TreeView control.

[Yana]

Hello Raymond,

I  agree with you this was not clearly explained in the docs, so I will update the topic right away.

Thank you for pointing that out.

Regards,
Yana
Progress Telerik