TreeListView - remove lines from column with Tree.

[Jakub]

Hi,

 

i'm looking for help with removing lines/border from column where i have hierarchical tree.

 

Property GridLinesVisibility is not solution because removes/adds lines in whole grid, but i want remove only in my first column.

 

I created styles based on GridviewCellStyle and applied them to cells, but without any results. RadTreeListView shows or not lanes only according to GridLinesVisibility, my styles changes nothing.

 

<Window.Resources>
        <Style x:Key="CellWithoutLanes" TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
            <Setter Property="BorderThickness" Value="0" />
        </Style>

        <Style x:Key="CellWithLanes" TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="5,5,5,5" />
        </Style>
    </Window.Resources>

    <Grid>
        <telerik:RadTreeListView ItemsSource="{Binding Processes}"
                                 AutoGenerateColumns="False"
                                 TreeLinesVisibility="Visible"
                                 RowIndicatorVisibility="Collapsed">
            <telerik:RadTreeListView.ChildTableDefinitions>

                <telerik:TreeListViewTableDefinition ItemsSource="{Binding Items}" />

            </telerik:RadTreeListView.ChildTableDefinitions>

            <telerik:RadTreeListView.Columns>

                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
                                            Header="Element"
                                            CellStyle="{StaticResource ResourceKey=CellWithoutLanes}">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="0" Text="{Binding Id}"/>
                                <TextBlock Grid.Column="1" Text="{Binding Name}"/>
                            </Grid>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>

                <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}"
                                            Header="Id"
                                            CellStyle="{StaticResource ResourceKey=CellWithLanes}" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Expression}"
                                            Header="Expression"
                                            CellStyle="{StaticResource ResourceKey=CellWithLanes}" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding UserPriority}"
                                            Header="UserPriority"
                                            CellStyle="{StaticResource ResourceKey=CellWithLanes}" />
            </telerik:RadTreeListView.Columns>
        </telerik:RadTreeListView>


    </Grid>

 

Best regards,

Jakub.

[Stefan Nenchev]

Hello Jakub,

In order to remove the lines for the first column, you have to edit the Control Template of the GridViewCell in the Style that targets that specific column. You can refer to the following documentation page - Editing Control Templates. The ControlTemplate of the GridViewCell contains a border element and you need to change its BorderThickness property from there. As you can notice once you check the Control Template of the cell, there are border elements for the different states(Normal, Selected, Current, etc.) so you can modify them with accordance to your preference. The following article should also be helpful for you - Styling Cells.

Regards,
Stefan Nenchev
Telerik