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

Expander icon getting cut off

5 Answers 36 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Bruce
Top achievements
Rank 2
Bruce asked on 05 Dec 2019, 09:48 PM

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.

5 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 06 Dec 2019, 12:40 PM

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

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
Bruce
Top achievements
Rank 2
answered on 06 Dec 2019, 02:44 PM

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!


0
Bruce
Top achievements
Rank 2
answered on 06 Dec 2019, 08:11 PM
I just realized that the Checkboxes are no longer showing. Is there a simple way to get them back while using the workaround?
0
Accepted
Yana
Telerik team
answered on 09 Dec 2019, 08:34 AM

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

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
Bruce
Top achievements
Rank 2
answered on 09 Dec 2019, 08:41 PM
That worked...thanks!
Tags
TreeView
Asked by
Bruce
Top achievements
Rank 2
Answers by
Yana
Telerik team
Bruce
Top achievements
Rank 2
Share this question
or