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

Tree Performance

11 Answers 200 Views

TreeView

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

John asked on 22 May 2009, 03:33 PM

I have a simple treeview with root nodes and one level of child notes (at the moment). I'm loading about one thousand objects into the tree at the root level and very few (a total of 4) child nodes. My queries return immediatley but it's taking inordinately long for the display of the tree to load. I'm also doing some filtering of the nodes (resetting the ItemsSource) and when the list is long the refresh of the tree is quite slow. For comparison sake I've replaced the tree with a RadGridView and the loading and filtering is near instantaneous. Are there some tweaks I can make to help improve performance of the TreeView?

My Code:

    
                <UserControl.Resources> 
        
                    <core:HierarchicalDataTemplate x:Key="DisplayTemplate"> 
        
                        <TextBlock Text="{Binding Name}" /> 
        
                    </core:HierarchicalDataTemplate> 
        
                    <core:HierarchicalDataTemplate x:Key="BucketTemplate"> 
        
                        <TextBlock Text="{Binding Name}" /> 
        
                    </core:HierarchicalDataTemplate> 
        
                    <core:HierarchicalDataTemplate x:Key="ClientTemplate"  
        
                        ItemTemplate="{StaticResource BucketTemplate}"  
        
                        ItemsSource = "{Binding Bucket}"> 
        
                         <TextBlock Text="{Binding Name}" /> 
        
                    </core:HierarchicalDataTemplate> 
        
                </UserControl.Resources> 
        
                <Grid x:Name="LayoutRoot"> 
        
                    <Grid.ColumnDefinitions> 
        
                        <ColumnDefinition Width="50" /> 
        
                        <ColumnDefinition Width="*" /> 
        
                    </Grid.ColumnDefinitions> 
        
                    <Grid.RowDefinitions> 
        
                        <RowDefinition Height="2" /> 
        
                        <RowDefinition Height="30" /> 
        
                        <RowDefinition Height="20" /> 
        
                        <RowDefinition /> 
        
                    </Grid.RowDefinitions> 
        
                    <TextBlock Text="Filter" Margin="5" Grid.Column="0" Grid.Row="1" /> 
        
                    <TextBox x:Name="TextBoxSearch" KeyUp="TextBoxSearch_KeyUp" Margin="5" Grid.Column="1" Grid.Row="1" /> 
        
                    <TextBlock Text="Clients" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="2" /> 
        
                    <tNav:RadTreeView  
        
                        Name="TreeClients"  
        
                        Background="Transparent" 
        
                        ItemTemplate="{StaticResource ClientTemplate}" 
        
                        Grid.ColumnSpan="2" Grid.Row="3"> 
        
                    </tNav:RadTreeView> 
        
                </Grid>

11 Answers, 1 is accepted

answered on 07 Aug 2009, 03:30 AM

Hi all,

Thanks to my colleague John, We found the following style improved the performance dramatically:

<UserControl.Resources>
        <Style TargetType="Telerik_Windows_Controls:RadTreeViewItem" x:Key="TreeViewItemStyle">
            <Setter Property="animation:AnimationManager.IsAnimationEnabled" Value="false" />
        </Style>
    </UserControl.Resources>

apply the style to RadTreeView and RadTreeViewItem:

<Telerik_Windows_Controls:RadTreeView x:Name="treeView"
                FontSize="8" IsLineEnabled="True" IsExpandOnSingleClickEnabled="False"
                IsExpandOnDblClickEnabled="False" HorizontalAlignment="Stretch"
                ImagesBaseDir="images/"   IsSingleExpandPath="False" SelectionMode="Single"
                ItemContainerStyle="{StaticResource TreeViewItemStyle}"
                >
                <Telerik_Windows_Controls:RadTreeViewItem
                    x:Name="RootNode" Header="Conquest Solutions" IsEnabled="True"
                    ItemContainerStyle="{StaticResource TreeViewItemStyle}"
                    IsLoadOnDemandEnabled="True" DefaultImageSrc="office-building.png" IsExpanded="False"
                    Input:CommandService.Command="LoadItems" Tag="0" HorizontalAlignment="Stretch" Margin="-8,0,0,0"/>
            </Telerik_Windows_Controls:RadTreeView>

answered on 07 Aug 2009, 07:35 AM

Turning off the animation does at least make what I would consider small structures usable. However, our findings are performance to render nodes becomes un-acceptable (to a user) above 500 nodes. A graph showing nodes rendered verses time is resonably linear. Note, that is not the total number of nodes in the structure, we are just messuring the time to render part of the structure at any one time. Memory consumption appears fine up until 3000 nodes, then it seems to rise dramatically.

My hope is UI Virtualization will address these problems. But I would like to try this asap, so when will some development code be available to test?

Thanks
Mike

answered on 10 Aug 2009, 08:09 AM

142236-treeviewperformancetest.zip

Hi Mike,

We are working on a UI Virtualization in RadTreeView. Using the UI virtualization the Treeview will be able to handle up-to 3-4000 nodes without any delay. The UI virtualization is planned for Q3 (beggining of November), but a beta version will be available sooner. This is with a highest priority for us! A significant performance gain for the TreeView is expected with the Q3 release when it will have UI virtualization.

Until then the TreeVIew will create containers for all its items.

There is one more thing that we can do to improve the performance - a minimalistic ControlTemplate. Currently the Template of the TreeViewItems has a lot of elements that you may not need - for example a loading animation, disabled state visual, checkbox, radio button, lines, edit presenter, etc. The total number of visual elements for a single TreeView item is 25. To improve the performance we can provide you with a custom template that will look as the one you are using now, but it will lack all the visual elements for the features that you do not need.

I expect that we can bring the visual elements down to 5-6. This will improve the performance but the TreeView will still be slow with items in the thousands.

Generally, you can think of performance in the following terms:

1. A smart use of templates/control logic can achieve good performance for items in the hundreds (1-1000)
2. UI Virtualization can increase the usable items count to thousands - 1000-10000
3. Data Virtualization is needed for more items, going to 1 mil. for example.

I am sending you a small test app with the TreeView. The minimal template included does not have the original colours, but it will give you a realistic idea of any performance gain.

In this test app you can also check the current memory footprint, also you get the difference with the last recorded memory footprint.

This shows you how much memory 100 items will add to your application. The slowdown durrng scrolling cannot be accurately measured, but less visual parts in the template work better for me.

As I mentioned, the TreeView will use UI virtualization for the Q3 release.

Kind regards,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Tree Performance

11 Answers, 1 is accepted