Chart and Grid Control initial load performance is slow

[Carlos]

Hi,

I am currently evaluating your Silverlight Controls and comparing it other popular controls. Unfortunately, I am experiencing some performance problems on your Charting and DataGrid Controls. Initial loading time of Telerik controls will take about 2-3 seconds.  I am not sure if I'm using it the wrong way or if there are some ways to optimize my code. I have attached the screenshot of the sample application that I wrote that will load a pie chart, bar chart and a data grid. 

Codes for the sample application are as follows:

XAML:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ChartToolsComparisonScreens"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:SampleData1="clr-namespace:Expression.Blend.SampleData.ReadingExceptionData"
    xmlns:SampleData2="clr-namespace:Expression.Blend.SampleData.CommunicationExceptionData"
    mc:Ignorable="d"
    x:Class="ChartToolsComparisonScreens.TelerikSample"
    Width="1200" Height="900">

    <UserControl.Resources>
        <SampleData1:ReadingExceptionData x:Key="ReadingExceptionData" d:IsDataSource="True"/>
        <SampleData2:CommunicationExceptionData x:Key="CommunicationExceptionData" d:IsDataSource="True"/>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <local:NavigationComponent HorizontalAlignment="Left" VerticalAlignment="Top" d:IsPrototypingComposition="True" Margin="8,24,0,0"/>
        <telerik:RadChart x:Name="telePieChart" Margin="116,130,125,368"/>
        <telerik:RadChart x:Name="teleBarChart" Margin="162,0,158,368" VerticalAlignment="Bottom" Height="402" Visibility="Collapsed"/>
        <Button x:Name="btnBack" Content="◄" HorizontalAlignment="Left" Margin="115,130,0,0" VerticalAlignment="Top" Width="43" Height="42" Click="btnBack_click" FontFamily="Calibri" FontSize="29.333" Visibility="Collapsed"/>
        <telerik:RadGridView x:Name="teleGrid" Margin="116,0,125,34" VerticalAlignment="Bottom" Height="330" RowIndicatorVisibility="Collapsed" CanUserFreezeColumns="False" AutoGenerateColumns="False" IsReadOnly="True">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding SerialNo}" Header="Serial No" Width="120" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding PlantNo}" Header="Plant No" Width="130" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding SiteId}" Header="Site ID" Width="110" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding MeterId}" Header="Meter ID" Width="110" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Status}" Header="Status" Width="110" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding InstallDate}" Header="Install Date" Width="125"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding UninstallDate}" Header="Uninstall Date" Width="125"/>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding LastReadDate}" Header="Last Read Date" Width="125" />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
        <telerik:RadDataPager HorizontalAlignment="Left" Margin="116,0,0,8" VerticalAlignment="Bottom" d:LayoutOverrides="Height" PageSize="10" Source="{Binding Items, ElementName=teleGrid}" IsTotalItemCountFixed="True" DisplayMode="FirstLastPreviousNextNumeric, Text"/>
        <TextBlock Height="53" Margin="115,73,371,0" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Telerik RadControls Q1 2011 SP1" VerticalAlignment="Top" FontFamily="Calibri" FontSize="48"/>
    </Grid>
</UserControl>

C#:

using System.Windows.Controls;
using Telerik.Windows.Controls.Charting;

namespace ChartToolsComparisonScreens
{
    public partial class TelerikSample : UserControl
    {
        Expression.Blend.SampleData.ReadingExceptionData.ItemCollection readingExceptions;
        Expression.Blend.SampleData.CommunicationExceptionData.ItemCollection communicationExceptions;

        public TelerikSample()
        {
            // Required to initialize variables
            InitializeComponent();

            // Bar Chart
            SeriesMapping barMapping = new SeriesMapping()
            {
                SeriesDefinition = new HorizontalBarSeriesDefinition()
                {
                    ShowItemLabels = true,
                    LegendDisplayMode = LegendDisplayMode.None
                }
            };

            teleBarChart.DefaultView = new ChartDefaultView
            {
                ChartLegend = new ChartLegend()
                {
                    Visibility = System.Windows.Visibility.Collapsed
                }
            };

            ItemMapping labelMapping = new ItemMapping("Label", DataPointMember.XCategory);
            ItemMapping valueMapping = new ItemMapping("Value", DataPointMember.YValue);
            barMapping.ItemMappings.Add(labelMapping);
            barMapping.ItemMappings.Add(valueMapping);

            barMapping.SeriesDefinition.ItemLabelFormat = "#Y";
            teleBarChart.SeriesMappings.Add(barMapping);

            teleBarChart.DefaultSeriesDefinition = new HorizontalBarSeriesDefinition();

            // Pie Chart
            SeriesMapping pieMapping = new SeriesMapping()
            {
                SeriesDefinition = new PieSeriesDefinition()
                {
                    ShowItemLabels = true,
                    LegendDisplayMode = LegendDisplayMode.None,
                    InteractivitySettings = new InteractivitySettings()
                    {
                        SelectionMode = ChartSelectionMode.Single,
                        SelectionScope = InteractivityScope.Item
                    }
                }
            };

            telePieChart.DefaultView = new ChartDefaultView()
            {
                ChartLegend = new ChartLegend()
                {
                    Visibility = System.Windows.Visibility.Collapsed
                },
                ChartArea = new ChartArea()
            };

            telePieChart.DefaultView.ChartArea.SelectionChanged += telePieChart_SelectionChanged;

            pieMapping.ItemMappings.Add(labelMapping);
            pieMapping.ItemMappings.Add(valueMapping);

            pieMapping.SeriesDefinition.ItemLabelFormat = "#Y%, #XCAT";
            telePieChart.SeriesMappings.Add(pieMapping);

            telePieChart.ItemsSource = ChartSampleData.getPerformanceData();

            readingExceptions = ((Expression.Blend.SampleData.ReadingExceptionData.ReadingExceptionData)Resources["ReadingExceptionData"]).Collection;
            communicationExceptions = ((Expression.Blend.SampleData.CommunicationExceptionData.CommunicationExceptionData)Resources["CommunicationExceptionData"]).Collection;
        }

        private void telePieChart_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
        {
            DataPoint dataPoint = null;
            if (e.AddedItems.Count > 0)
                dataPoint = e.AddedItems[0];
            else
                return;

            if (dataPoint.XCategory.IndexOf("Exception") > -1)
            {
                if (dataPoint.XCategory.IndexOf("Reading") > -1)
                {
                    teleBarChart.ItemsSource = ChartSampleData.getReadingException();

                    teleGrid.ItemsSource = readingExceptions;
                }
                else if (dataPoint.XCategory.IndexOf("Communication Exception") > -1)
                {
                    teleBarChart.ItemsSource = ChartSampleData.getCommunicationException();

                    teleGrid.ItemsSource = communicationExceptions;
                }

                telePieChart.DefaultView.ChartArea.UnselectItem(dataPoint);
                teleBarChart.Visibility = System.Windows.Visibility.Visible;
                telePieChart.Visibility = System.Windows.Visibility.Collapsed;
                btnBack.Visibility = System.Windows.Visibility.Visible;
            }
        }

        private void btnBack_click(object sender, System.Windows.RoutedEventArgs e)
        {
            telePieChart.Visibility = System.Windows.Visibility.Visible;
            teleBarChart.Visibility = System.Windows.Visibility.Collapsed;
            btnBack.Visibility = System.Windows.Visibility.Collapsed;

            teleGrid.ItemsSource = null;
        }
    }
}

Thanks and I hope to hear from anyone in this community!

Warmest Regards,
Carlos

[Vlad]

Hi Carlos,

 Can you send us this application via support ticket to check what's going on? In the meantime you can check for example this demo for RadGridView demonstrating performance when bound to 1 mil. records and 1000 columns. 

Kind regards,
Vlad
the Telerik team

[Vlad]

Hello Carlos,

 I've tried the project from your support ticket however everything worked pretty fast on my end. Here is a small screencast for more info:
http://screencast.com/t/lnfYUz2h

On the other hand I've noticed various binding expression errors in the Visual Studio output window:

System.Windows.Data Error: BindingExpression path error: 'Zoom' property not found on 'Microsoft.Expression.Prototyping.Navigation.NavigationViewModel' 'Microsoft.Expression.Prototyping.Navigation.NavigationViewModel' (HashCode=28561251). BindingExpression: Path='Zoom' DataItem='Microsoft.Expression.Prototyping.Navigation.NavigationViewModel' (HashCode=28561251); target element is 'Microsoft.Expression.Prototyping.Controls.EnhancedSlider' (Name='ArtboardZoomSlider'); target property is 'SnappedValue' (type 'System.Double')..
System.Windows.Data Error: BindingExpression path error: 'DockedControls' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='DockedControls' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Grid' (Name='HeadsUpDisplayShim'); target property is 'Visibility' (type 'System.Windows.Visibility')..
System.Windows.Data Error: BindingExpression path error: 'CollapsedControls' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='CollapsedControls' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Shapes.Rectangle' (Name='ExpanderSite'); target property is 'Visibility' (type 'System.Windows.Visibility')..
System.Windows.Data Error: BindingExpression path error: 'CollapsedControls' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='CollapsedControls' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Button' (Name='CollapseToggle'); target property is 'Visibility' (type 'System.Windows.Visibility')..
System.Windows.Data Error: BindingExpression path error: 'IsMapOpen' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='IsMapOpen' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Border' (Name='MapContainer'); target property is 'Visibility' (type 'System.Windows.Visibility')..
System.Windows.Data Error: BindingExpression path error: 'FlowGraphViewModel' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='FlowGraphViewModel' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Grid' (Name=''); target property is 'DataContext' (type 'System.Object')..
System.Windows.Data Error: BindingExpression path error: 'IsFlowOverviewOpen' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='IsFlowOverviewOpen' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Border' (Name='FlowOverviewContainer'); target property is 'Visibility' (type 'System.Windows.Visibility')..
System.Windows.Data Error: BindingExpression path error: 'FlowGraphViewModel' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='FlowGraphViewModel' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Grid' (Name='FlowGraphRegion'); target property is 'DataContext' (type 'System.Object')..
System.Windows.Data Error: BindingExpression path error: 'IsMapOpen' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='IsMapOpen' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Primitives.ToggleButton' (Name='OpenSmallToggle'); target property is 'IsChecked' (type 'System.Nullable`1[System.Boolean]')..
System.Windows.Data Error: BindingExpression path error: 'IsFlowOverviewOpen' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='IsFlowOverviewOpen' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Primitives.ToggleButton' (Name=''); target property is 'IsChecked' (type 'System.Nullable`1[System.Boolean]')..
System.Windows.Data Error: BindingExpression path error: 'IsMapOpen' property not found on 'Microsoft.Expression.Prototyping.Branding.BrandingModel' 'Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391). BindingExpression: Path='IsMapOpen' DataItem='Microsoft.Expression.Prototyping.Branding.BrandingModel' (HashCode=17404391); target element is 'System.Windows.Controls.Primitives.ToggleButton' (Name='MapVisibleToggle'); target property is 'IsChecked' (type 'System.Nullable`1[System.Boolean]')..
System.Windows.Data Error: BindingExpression path error: 'IsFlowOverviewOpen' property not found on 'Microsoft.Expression.Prototyping.FlowGraph.FlowGraphViewModel' 'Microsoft.Expression.Prototyping.FlowGraph.FlowGraphViewModel' (HashCode=38031802). BindingExpression: Path='IsFlowOverviewOpen' DataItem='Microsoft.Expression.Prototyping.FlowGraph.FlowGraphViewModel' (HashCode=38031802); target element is 'System.Windows.Controls.Primitives.ToggleButton' (Name='OpenLargeToggle'); target property is 'IsChecked' (type 'System.Nullable`1[System.Boolean]')..
System.Windows.Data Error: BindingExpression path error: 'IsMapOpen' property not found on 'Microsoft.Expression.Prototyping.FlowGraph.FlowGraphViewModel' 'Microsoft.Expression.Prototyping.FlowGraph.FlowGraphViewModel' (HashCode=38031802). BindingExpression: Path='IsMapOpen' DataItem='Microsoft.Expression.Prototyping.FlowGraph.FlowGraphViewModel' (HashCode=38031802); target element is 'System.Windows.Controls.Primitives.ToggleButton' (Name='CloseMapViewToggle'); target property is 'IsChecked' (type 'System.Nullable`1[System.Boolean]')..

Maybe these are related to problems at your end? Can you check them? Regards,
Vlad
the Telerik team

[Carlos]

Hi Vlad,

Thank you for your prompt action. I am referring to the first loading time of the screen containing the Telerik Chart control and DataGrid. In this example, it will take about 2-3 seconds to load the screen when you click the Telerik Button. I am just afraid that if we have a lot of charts and grids, it will take too long to load the page (the first time). Is this a limitation of Silverlight? Is there a way to circumvent this problem?

I will take a look at the binding errors that you pointed. Thank you for informing me. 

Warmest Regards,
Carlos

[Vlad]

Hello Carlos,

 Most probably these errors are directly related to the initial loading time.

Regards,
Vlad
the Telerik team

[Carlos]

Hi Vlad,

I'll fix the error first. Thank again for your prompt action and response!

Warmest Regards,
Carlos

[Carlos]

Hi Vlad,

I just created another project that's pretty much the same as before, except I created a Silverlight application (I created a SketchFlow Application using Expression Blend 4 in the previous project). The errors that you encountered is probably because you don't have Expression Blend 4. I don't encounter the errors that you sighted but I am still experiencing slow performance for the initial load of the TelerikSample screen. I have replied to the previous ticket and attached the new project that I mentioned.
 
Thanks and I hope you can help me with this problem.

Warmest Regards,
Carlos 

[Giuseppe]

Hello Carlos,

We have addressed your inquiry in the other support ticket you have opened on this matter.


Regards,
Giuseppe
the Telerik team