GridView load delay

[George]

Hello Telerik Team,
I have one more stupid question about GridView component. Our application have a main window with menu toolbar and frame which is filled by some content (page with gridview) which is selected by some button or menu item. When I click on the button (menu item), I would like to show my data grid in content frame, however grid loading time seems to me quite long. First, i thought it is caused by cell templates/metro style/disabled virtualization/placing into grid without fixed size ... , but then a make a simplification and application behaves exactly the same. It means, that I have approximatelly at least 2-3s data grid loading time after click on the button even if I display only few records (about 3 columns and 40 rows). It can be quite annoying for our users, thus i would like to ask You, if there is some technique to decrease this loading time or You can identify some fault I made in the code??? I made a simplification of our project, but because i cannot attach compressed source codes, i try to add some code in this post. It seems to me, that i have used all possible actions described in your "performance guide" or those described in forums (default theme, no cell templates, virtualization, fixed size, read only, simple binding, ...).

MainVindow.xaml

<Window x:Class="SimpleGrid.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="25"/>

            <RowDefinition Height="280" />

        </Grid.RowDefinitions>

        <StackPanel  Grid.Row="0">

            <Button Content="Create grid" x:Name="button1" Grid.Row="0" Click="button1_Click"/>          


        </StackPanel>

        <Frame x:Name="Frame1" Background="Black" Grid.Row="1"  Height="280" Width="500"/>

         

    </Grid>

</Window>

MainWindow.xaml.cs

namespace SimpleGrid
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Page p = new Grid();
            this.Frame1.Content = p;
        }

    }
}

Grid.xaml (grid page to be inserted)

<Page x:Class="SimpleGrid.Grid"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:my="clr-namespace:SimpleGrid"
      mc:Ignorable="d"
      d:DesignHeight="280" d:DesignWidth="500"
    Title="Grid">
    <Page.Resources>
        <my:MyViewModel x:Key="MyViewModel"/>
    </Page.Resources>

     <Grid DataContext="{StaticResource MyViewModel}"  Height="280" Width="500">

            <telerik:RadGridView
                                Name="clubsGrid"
                                ItemsSource="{Binding Clubs}"
                                AutoGenerateColumns="False"
                                ShowGroupPanel="False"
                                IsReadOnly="True"
                                MaxHeight="280"
                                MaxWidth="500"
                                EnableColumnVirtualization="True"
                                EnableRowVirtualization="True"
                                CanUserFreezeColumns="False"
                                RowIndicatorVisibility="Collapsed"
                                CanUserResizeColumns="False">

                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Width="155" IsGroupable="False" IsFilterable="False" IsSortable="False"/>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}" Header="Est." Width="180" IsGroupable="False" IsFilterable="False" IsSortable="False"/>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"  Header="Stadium" Width="155" IsGroupable="False" IsFilterable="False" IsSortable="False"/>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
     </Grid>
</Page>

Data are binded from MyViewModel.cs + Clubs.cs which is used in your examples  (322627_RadGridView-WPF-AR-20).

[Yordanka]

Hi George,

Thank you for the feedback.

One thing we could suggest is using NoXaml binaries with the theme you use. In this way only resources for the referred theme will be loaded. I am attaching sample project.

Also, you can try loading Telerik assemblies earlier. Now, they are loaded once the button is clicked.
 
All the best,
Yordanka
the Telerik team

[George]

Hi Yordanka,
thank you for your response. I tried to use xaml templates, but it seems, that the load time is nearly the same. I also tried to decrease load time by preload all assemblies (assembly load in main window initialization), VS output window displays, that all assemblies are loaded at startup and no one is loaded when the button is pressed, however there is still considerable delay on grid load (I am not sure, if i made some mistake?) Do you have some simple example with assembly preloading?

I also noticed, that the performance is much better if i "preload the view" on start of my application. If the view with datagrid is displayed at startup even with visibility=hidden (and temp data source), next view rendering is much faster (about 500ms instead of few seconds). However, this solution is quite terrible and not usable for more views.

Do you have any other suggestions? Is there any other initialization needed on start of the view with datagrid instead of showing the whole view(s)?? It is possible (for me) to make these initializations on start of the main window, but "rendering" of all views (even if they are hidden) seems to me quite terrible.

Best regards,
George

[Yordanka]

Hi George,

We tested the case using simplified templates for GridViewRow and GridViewCell. I am attaching updated project. Some part of these templates are removed and loading time is faster. Please review it. Consider that this is only a sample, you could remove any other part that is not need for your project.
 
Regards,
Yordanka
the Telerik team

[George]

Hi Yordanka,
unfortunatelly it seems, that these modifications cause just a small speedup (about 200-300ms) which is not such helpfull as i thought, but similar problems can be observed also for another telerik UI controls. Some complex pages takes about 5-7s to be loaded. My measurements show, that most of this time is spend on layout. Because we were not able to overcome this loading time issue, I decided to preload all pages at the start of the application behind the splash screen. Our pages are inserted into main frame which keeps page history and navigation betwen frames and content reloading is much faster, than their initialisation. It takes about 100-600ms (originally 1300-1700ms) for our simple page with telerik datagrid (virtualisation+cutom cell templates+custom metro style) and more complex pages with datagrids, data pickers, colorpickers ... takes about 1000ms (originally 5300-7500ms, custom metro style+virtualisation). It also seems, that datagrid initialisation time is "almost" constant does not depend on the number of records (virtualisation? :)). I have made also extensive comparison with another data grids, but i do not want to tire you :). The solution i described earlier is suitable for us. Than you, for your time.

Best regards,

George