How can I remove the border of the treelistview

[Bi Chao]

Hi,

I have just updated the new dll and got some trouble removing the border of the grid.

I tried to set the borderthickness=0 and borderbrush= white, but neither works, because I want to get all the border removed. Can anyone help?

[Kalin Milanov]

Hello Bi Chao,

Could you please be a bit more specific about which border are you referring to so I can be of assistance?

Sincerely yours,
Kalin Milanov
the Telerik team

[Bi Chao]

 

 

 

Below is my xaml code:
<telerikGrid:RadTreeListView x:Name="grdResults" BorderThickness="0" Style="{StaticResource mytreeListFontStyle}" AutoGenerateColumns="False"

 

 

 

Visibility="Collapsed" EditTriggers="None" RowIndicatorVisibility="Collapsed"

 

 

 

AlternationCount="2" AlternateRowBackground="#E9E9E9FF" HorizontalAlignment="Left">

 

 

 

 

<telerikGrid:RadTreeListView.ChildTableDefinitions>

 

 

 

 

<telerikGrid:TreeListViewTableDefinition ItemsSource="{Binding Children}" />

 

 

 

 

</telerikGrid:RadTreeListView.ChildTableDefinitions>

 

 

 

 

<telerikGrid:RadTreeListView.Columns>

 

 

 

 

<telerikGrid:GridViewColumn Header="Item" MinWidth="260" HeaderCellStyle="{StaticResource myHeaderStyle}" CellStyle="{StaticResource myCellStyle}">

 

 

 

 

<telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

 

<CheckBox Visibility="{Binding CanDelete}" IsChecked="{Binding DeleteFlag, Mode=TwoWay}" Margin="-5,5,0,0" />

 

 

 

 

<TextBlock VerticalAlignment="Center" Text="{Binding Item, Mode=OneWay}" Height="25" Padding="0,5,0,0" />

 

 

 

 

</StackPanel>

 

 

 

 

</DataTemplate>

 

 

 

 

</telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

</telerikGrid:GridViewColumn>

 

 

 

 

<telerikGrid:GridViewColumn Width="75" Header="Size now" HeaderCellStyle="{StaticResource myHeaderStyle}" CellStyle="{StaticResource myCellStyle}">

 

 

 

 

<telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock VerticalAlignment="Center" Text="{Binding SizeNow,Mode=OneWay}" />

 

 

 

 

</DataTemplate>

 

 

 

 

</telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

</telerikGrid:GridViewColumn>

 

 

 

 

<telerikGrid:GridViewColumn Width="145" Header="Size of versioned data" HeaderCellStyle="{StaticResource myHeaderStyle}" CellStyle="{StaticResource myCellStyle}">

 

 

 

 

<telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock VerticalAlignment="Center" Text="{Binding SizeOfVersionData, Mode=OneWay}" />

 

 

 

 

</DataTemplate>

 

 

 

 

</telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

</telerikGrid:GridViewColumn>

 

 

 

 

<telerikGrid:GridViewColumn Header="Status and notes" HeaderCellStyle="{StaticResource myHeaderStyle}" CellStyle="{StaticResource myCellStyle}">

 

 

 

 

<telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock VerticalAlignment="Center" Text="{Binding StatusNotes, Mode=OneWay}" TextWrapping="Wrap"/>

 

 

 

 

</DataTemplate>

 

 

 

 

</telerikGrid:GridViewColumn.CellTemplate>

 

 

 

 

</telerikGrid:GridViewColumn>

 

 

 

 

</telerikGrid:RadTreeListView.Columns>

 

 

 

 

</telerikGrid:RadTreeListView>

 

[Bi Chao]

Attached is a screenshot of the treelist view.  If you look at the header, you will see the inner border.

Thanks and regards,

Bill Chao | Analyst Programmer | Tel [phone] | Mob [phone] | Fax [phone] | www.solvexia.com

Suite 1506, Westfield Tower 2, 101 Grafton Street, Bondi Junction, NSW 2022, Australia

[Kalin Milanov]

Hi Bi Chao,

To do this you will need to edit the template of the header cell and remove the border manually. Following is the XAML you need look for and the highlight marks the color you need to change / remove.

<Border x:Name="GridViewHeaderCell" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" Background="{TemplateBinding Background}" BorderThickness="1" />
</Border>

I hope this helps solve your issue.

All the best,
Kalin Milanov
the Telerik team

[Bi Chao]

Thanks Kalin.  Much appreciated. This solved our problem.

However, it is not very convinient.  I suppose is a user set the border, it should set the inner border as well.

Another this I found is the new treelistview is a bit slow than the old one after you rewrote is based on gridview.

For 30 records,if the records are not loaded, the new one takes 7.8s to expand, while the old one takes 2.8s.
if arleady loaded, the new one takes 7.2s to expand, while the old one takes 0.1s

Is there a way to improve this?

[Milan]

Hello Bi Chao,

There are several possible ways to achieve better performance. First you could make sure that RadTreeListView is not placed in a container that measures it with infinite height/width like StackPanel, ScrollViewer, etc.

I noticed that you use many columns with custom CellTemplate which can be replaced with GridViewDataColumn which will automatically place a TextBlock and usually provides better performance. 

For example:

<telerikGrid:GridViewColumn Width="75" Header="Size now" HeaderCellStyle="{StaticResource myHeaderStyle}" CellStyle="{StaticResource myCellStyle}">
    <telerikGrid:GridViewColumn.CellTemplate>
        <DataTemplate>
            <TextBlock VerticalAlignment="Center" Text="{Binding SizeNow,Mode=OneWay}" />
        </DataTemplate>
    </telerikGrid:GridViewColumn.CellTemplate>
</telerikGrid:GridViewColumn>

<!-- same as -->
<telerikGrid:GridViewDataColumn DataMemberBinding="{Binding SizeNow,Mode=OneWay}"/>

If performances does not improve we would really appreciate it if we can take a look at the application itself. 

Best wishes,
Milan
the Telerik team

[Bi Chao]

Hi,

Thanks for your suggestions.

That code was used in the old treelistview control and worked good. Now we are using 2010.2.730.1040's version... Will try it and let you know.

[Bi Chao]

 

Hi, I change the xaml as you suggested. The performance has been improved, but it still takes 1-2 secends even its loaded.

I think the reason is I kept the first column as the original template, and it contains some checkboxes. Any solutions?  And for the inner border, are you guys gonna address that issue in the future build. My boss really dont feel happy about it. He want our code to be as easy as possible so that it is easy to maintain.

The xaml code of the first column:


<telerikGrid:GridViewColumn Header="Item" MinWidth="260" HeaderCellStyle="{StaticResource myHeaderStyle}" CellStyle="{StaticResource myCellStyle}">
                  <telerikGrid:GridViewColumn.CellTemplate>
                      <DataTemplate>
                          <StackPanel Orientation="Horizontal">
                              <CheckBox Visibility="{Binding CanDelete}" IsChecked="{Binding DeleteFlag, Mode=TwoWay}"  Margin="-5,5,0,0"  />
                              <TextBlock VerticalAlignment="Center" Text="{Binding Item, Mode=OneWay}" Height="25" Padding="0,5,0,0" />
                          </StackPanel>
                      </DataTemplate>
                  </telerikGrid:GridViewColumn.CellTemplate>
              </telerikGrid:GridViewColumn>

 

[Milan]

Hi Bi Chao,

I am glad that performance has improved. Probably it can be improved even further but we will have to take a look at the application itself. 

In regard to the styling issues, we will think about possible ways to improve the styling experience but most probably we will not be able to introduce any changes in the near future. 

All the best,
Milan
the Telerik team