RadTreeListView: Hide expander in level 0

[Alexander]

Hi,

I've been working with the RadTreeListView control. I'm very happy with it.

However, I stumbled upon a problem when trying to implement a new feature.

I want to hide the expander button of the "first layer items" (level 0). Technically, it worked by adding a trigger to the GridViewToggleButtonArrowTemplate:

 

<DataTrigger
	Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:TreeListViewRow}, Path=Level}"
	Value="0">
	<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>

 

BUT, this solution leads to a huge gap between the table border and the content of each cell in the first column.

I tried obvious things like applying paddings or margins with negative values or setting the expander button visibility to collapsed instead of hidden. But all of these approaches did not lead me to a consistent solution with a desirable UI. Either, the expander button of child items would not be visible anymore, or there would be a huge indent between level 0 and 1 items.

What I'm trying to achieve is that the expander in level 0 is kind of "wiped out" -> it shouldn't be displayed and there must be no gap. But the expanders for all child items must stay untouched. Therefore, all of the cell content in column 1 would have to be moved to the left by around 20 Px (I guess it's 20 Px, because this is the width of the GridViewToggleButton inside the TreeListViewRowTemplate).

I assume, it's a change which has to be made deeply inside the template. I just couldn't find where yet. All "obvious" approaches didn't lead me to where I wanna get.

Any help is greatly apprexciated!

 

Best regards,

Alex

[Martin Ivanov]

Hello Alex,

There is no built-in mechanism that will allow you to get the desired effect. The closest thing is to set the HierarchyIndent property, but this will affect also the child rows.

What you can do is to re-template the TreeListViewRow element. More superficially, you can set the Visibility of the GridViewToggleButton element in the template to Collapsed, when the Level property of the parent TreeListViewRow is 0.

<controls:GridViewToggleButton x:Name="PART_ExpandButton"
                               Grid.Column="1"
                               Grid.ColumnSpan="2"
                               AutomationProperties.Name="expander"
                               Width="{telerik:Windows11Resource ResourceKey=TreeListViewRowIndicatorWidth}"
                               Height="NaN"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Stretch"
                               IsTabStop="False"
                               IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                               PresentationMode="Arrow">
    <controls:GridViewToggleButton.Resources>
        <Style TargetType="controls:GridViewToggleButton" BasedOn="{StaticResource GridViewToggleButtonStyle}">
            <Setter Property="Visibility" Value="Visible" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Level, RelativeSource={RelativeSource TemplatedParent}}" Value="0">
                    <Setter Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </controls:GridViewToggleButton.Resources>
</controls:GridViewToggleButton>

You can see this approach shown in the attached project. The template in the project is based on the Windows11 theme.

If you want to move the child rows with a level down (one indent on the left), you can use the RowLoaded event of RadTreeListView to decrease the Level property of the child rows.

private void radTreeListView_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)
{
    if (e.Row is TreeListViewRow row && row.Level != 0)
    {
        row.Level -= 1;
    }
}

Regards,
Martin Ivanov
Progress Telerik