The helper Lines from TreeListView are set to visible, but some of them disappear when a GridViewImageColumn is used

[Rodrigo]

I have TreeLinesVisibility="Visible" on my TreeListView, as in the XAML snippet below.

<telerik:RadTreeListView x:Name="NEWCollectionControl" Grid.Row="1" EnableLostFocusSelectedState="False" ShowColumnHeaders="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadOutlookBar}}, Path=DataContext.Controller.ShowTreeHeader, Mode=TwoWay}" GridLinesVisibility="None" RowIndicatorVisibility="Collapsed" SelectionUnit="FullRow" ColumnWidth="*" TreeLinesVisibility="Visible" AutoExpandItems="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadOutlookBar}}, Path=DataContext.Controller.TreeViewAutoExpand, Mode=TwoWay}" AutoGenerateColumns="False" ItemsSource="{Binding Items}" IsExpandedBinding="{Binding IsExpanded, Mode=TwoWay}" SelectedCellsChanging="NEWCollectionControl_SelectedCellsChanging" DataLoaded="NEWCollectionControl_DataLoaded" Initialized="NEWCollectionControl_Initialized" SelectionChanged="NEWCollectionControl_SelectionChanged">
    <telerik:RadTreeListView.ChildTableDefinitions>
        <telerik:TreeListViewTableDefinition ItemsSource="{Binding Items}" />
    </telerik:RadTreeListView.ChildTableDefinitions>
    <telerik:RadTreeListView.Columns>
        <telerik:GridViewImageColumn IsVisible="{Binding Controller.UseTreeViewIcons}" DataMemberBinding="{Binding Image}" TextAlignment="Left" ImageHeight="12" ImageWidth="{Binding ImageWidth}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Translation.CurrentTranslation}" MinWidth="200" Header="{Binding Controller.PSRDictionary.Collection.CurrentTranslation}" />
    </telerik:RadTreeListView.Columns>
</telerik:RadTreeListView>

However, the GridViewImageColumn, which was added later in order to allow for some icons to the side of the TreeListView, is causing elements of the 3rd hierarchy level onwards to not have those lines. The behaviour can be seen in the image below, and it will happen regardless if the column is visible or not. 

I have tried to mess with many of the properties on these elements but to no success.

 

 

[Stenly]

Hello Rodrigo,

I have created a sample project, in order to get as close as possible to the scenario on your end, however, I was not able to reproduce this behavior. I have attached the sample application that was used for testing, so, would it be possible to try it out and let me know if I am missing something of importance?

Regards,
Stenly
Progress Telerik

[Rodrigo]

Thanks for your answer, it shed me some light in what the problem actually is. You will be able to reproduce the behaviour in your sample project by setting IsVisible="False" and Width="50". I've set the width to a fixed value because the column was too wide (I wish I could insert the Icon without actually inserting a whole column, for the [icon + text] column to align left beautifully, but anyway).

The thing is, even when the column is not visible, it considers the width of the element and hides the lines that would go beyond that size. If you set Width="80" the lines won't hide anymore.

My issue is I don't want the text to be too far right from the lines, and I might be able to do so by limiting the width of the image column, but there are cases where I will have the icons visibility set to false (it will bind to a variable) and in those cases a fixed width will cause the lines to hide beneath.

[Stenly]

Hello Rodrigo,

Indeed, with this setup, the tree lines seem to be hidden. What I could suggest as an alternative to using the GridViewImageColumn, would be to create a custom CellTemplate for the GridViewDataColumn that is bound to Translation.CurrentTranslation property (code snippet from your initial reply). In the DataTemplate for the CellTemplate property, an Image element could be created that will present the image and, for example, a TextBlock to hold the value of the Translation.CurrentTranslation property.

The custom CellTemplate would look similar to the following implementation:

<telerik:RadTreeListView.Columns>
    <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}">
        <telerik:GridViewDataColumn.CellTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Image}" Height="12" Width="12"/>
                    <TextBlock Text="{Binding Translation.CurrentTranslation}"/>
                </StackPanel>
            </DataTemplate>
        </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>
</telerik:RadTreeListView.Columns>

To control the visibility of the Image element, you could bind its Visibility property to the Controller.UseTreeViewIcons property and via a Converter to return either Visible or Collapsed depending on the incoming value.

I have attached a sample project that contains an implementation of this suggestion.

[Rodrigo]

Thank you again, this solves it pretty well. In my humble opinion using a StackPanel looks a lot better than including a separate column for icons because it also allows the text to align left more responsively.