Expander icon getting cut off

[Bruce]

I'm trying to do some very simple proof-of-concept stuff in Xamarin with the Telerik TreeView and I'm experiencing cutoff expanders that are fine when non-expanded but the right side is cut off when expanded (see attachment). What might I need to do to have it display correctly?

The code is pretty simple: 

 <telerikDataControls:RadTreeView Grid.Column="0" x:Name="TopicsTreeView" ItemsSource="{Binding Topics}" CheckBoxMode="Propagate">
        <telerikDataControls:TreeViewDescriptor ItemsSourcePath="Items" DisplayMemberPath="DisplayName" TargetType="{x:Type v1:Topic}"/>
 </telerikDataControls:RadTreeView>

Thanks.

[Yana]

Hello Bruce,

Thank you for your interest in TreeView for Xamarin.

It seems you've come upon a visual glitch on UWP, the arrow is properly shown on Android and iOS. I've logged a bug report regarding this on your behalf, you can track its status at the link below:

https://feedback.telerik.com/xamarin/1445184-treeview-uwp-part-of-the-expandcollapseindicator-is-cut-off-when-the-item-is-expanded

I've also added some points to your account for bringing this issue to our attention. 

You could use the following approach to workaround the issue - create a custom ItemTemplate as described here: TreeView Item Template and modify the column width for UWP with a static value:

 

<telerikDataControls:TreeViewDescriptor.ItemTemplate>
    <DataTemplate>
        <Grid Margin="{Binding Path=Level, Converter={StaticResource levelToMarginConverter}}"
            HeightRequest="40">
            <Grid.ColumnDefinitions>
                <ColumnDefinition>
                    <ColumnDefinition.Width>
                        <OnPlatform x:TypeArguments="GridLength" Default="Auto">
                            <On Platform="UWP">45</On>
                        </OnPlatform>
                    </ColumnDefinition.Width>
                </ColumnDefinition>
                <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>

I hope this workaround would be acceptable for you.

Regards,
Yana
Progress Telerik

[Bruce]

Kudos again to you guys for your great response time! And, sorry for not including the detail that this was from UWP, but you caught that on your own. Your workaround appears to work fine and I look forward to seeing this updated in a future version.

Thanks!

[Bruce]

I just realized that the Checkboxes are no longer showing. Is there a simple way to get them back while using the workaround?

[Yana]

Hello Bruce,

Indeed, the checkbox is not added to the ItemTemplate, I am sorry I missed it. You can add the Checkbox like this:

<telerikDataControls:TreeViewDescriptor.ItemTemplate>
    <DataTemplate>
        <Grid Margin="{Binding Path=Level, Converter={StaticResource levelToMarginConverter}}"
        HeightRequest="40">
            <Grid.ColumnDefinitions>
                <ColumnDefinition>
                    <ColumnDefinition.Width>
                        <OnPlatform x:TypeArguments="GridLength" Default="Auto">
                            <On Platform="UWP">45</On>
                        </OnPlatform>
                    </ColumnDefinition.Width>
                </ColumnDefinition>
                <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}" />
            <telerikPrimitives:RadCheckBox Grid.Column="1"
                                IsChecked="{Binding Path=IsChecked, Mode=TwoWay}"
                                IsVisible="{Binding Path=IsCheckBoxVisible}"
                                VerticalOptions="Center" />
            <telerikTreeView:ItemText Grid.Column="2"
                        Margin="8,0,0,0"
                        VerticalOptions="Center"
                        Text="{Binding Item.Name}" />
        </Grid>
    </DataTemplate>
</telerikDataControls:TreeViewDescriptor.ItemTemplate>

 

where telerikPrimitives is defined like this:

 

 xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"

 

I will update the ItemTemplate article as well.

I hope it is ok now.

Regards,
Yana
Progress Telerik

[Bruce]

That worked...thanks!