MouseOver CPU performance

[Oliver]

Hi,

I use Telerik V2012.1.326.35 and on our customer site, they have a huge cpu problem :( In a RadGridView, we have 1000 items. Simply doing a mouseover (when the data is completely loaded)  the grid cause the cpu going up to 90% (IT'S A CRITICAL SITUATION).

The problem on our customer site is, because they have a slower computer, when they perform a mouveover, when the cpu going up to 90%, the mouse pointer start to hang, move, hang, move and so on...

On my computer, a faster compiter, the cpu is going up to 36%.

In our application we use Telerik Office Blue Theme and the Column/Row virtualization is on. If you suggest me to do somthing with Blen, we don't have it :(

Thank's

[Yordanka]

Hello Oliver,

Thank you for the feedback.

I've tested a grid with 1000 items and 20 columns on a slower machine and I couldn't reproduce such cpu consumption on mouse over. Could you share more details about your grid? Are there specific styles applied? 
 
Kind regards,
Yordanka
the Telerik team

[Oliver]

Hi Yordanka,

even with the Telerik demo, when I move my mouse over a grid with data, I notice that the cpu goes up from 2% to 25%. Our grid take almost the screen size to show the maximum of data.

As I said, we use the Telerik Office_Blue theme.

Here is my grid definition in my xaml:
<telerikGrid:RadGridView Grid.Row="3" Name="gvReports" SelectionChanged="ItemsList_SelectionChanged" AutoGenerateColumns="False" SelectionMode="Single" IsReadOnly="True" TabIndex="100" RowIndicatorVisibility="Collapsed" RowLoaded="ItemsList_RowLoaded" ShowColumnFooters="True"  ClipboardCopyMode="Cells" CurrentCellChanged="ItemsList_CurrentCellChanged" CopyingCellClipboardContent="ItemsList_CopyingCellClipboardContent" ElementExporting="ItemsList_ElementExporting" />

Custom styles file that we use:
<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <!--FocusVisualStyle-->
    <ControlTemplate x:Key="FocusTemplate" >
        <!--<Rectangle Margin="-3" Stroke="Orange" StrokeThickness="2" RadiusX="2" RadiusY="2" StrokeDashArray="2,1">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="3" Duration="0:0:1" RepeatBehavior="Forever" Storyboard.TargetProperty="StrokeDashOffset" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>-->
    </ControlTemplate>

    <Style x:Key="FocusStyle" TargetType="{x:Type Control}">
        <Setter Property="Template" Value="{StaticResource FocusTemplate}"/>
    </Style>
    <!--FocusVisualStyle-->

    <DataTemplate x:Key="WatermarkTemplate">
        <TextBlock Opacity="1" Text="{Binding}" />
    </DataTemplate>
   
    <Style TargetType="TextBox" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=TextBox}}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}" />
    </Style>
   
    <Style TargetType="CheckBox" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=CheckBox}}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}" />
    </Style>
   
    <Style TargetType="RadioButton" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=RadioButton}}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}" />
    </Style>
   
    <Style TargetType="ListBox" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=ListBox}}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}" />
    </Style>

    <Style TargetType="telerik:RadDropDownButton">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}" />
    </Style>
   
    <Style TargetType="StatusBar">
        <!--<Setter Property="Background" Value="#F1F5FB"/>-->
        <Setter Property="StatusBar.BorderThickness" Value="1" />
        <Setter Property="StatusBar.Background">
            <Setter.Value>               
                <SolidColorBrush Color="#FFE2F0FD" /> <!--Telerik: Key="ControlBackground_Disabled"-->
                <!--Telerik: Key="ControlBackground_Normal" <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFEBF3FF"/>
                    <GradientStop Color="#FFCAE1FF" Offset="0.5"/>
                    <GradientStop Color="#FFA1C5F2" Offset="0.5"/>
                    <GradientStop Color="#FFD0F3FF" Offset="1"/>
                </LinearGradientBrush>-->
            </Setter.Value>
        </Setter>
       
        <Setter Property="StatusBar.BorderBrush">
            <Setter.Value>
                <SolidColorBrush Color="#FF9BB0CD" /> <!--Telerik: Key="ControlOuterBorder_Disabled"-->               
            </Setter.Value>
        </Setter>       
    </Style>

    <Style TargetType="telerik:GridViewCheckBoxColumn">
        <Setter Property="telerik:GridViewCheckBoxColumn.CellStyle">
            <Setter.Value>
                <Style TargetType="telerik:GridViewCell">
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                </Style>
            </Setter.Value>
        </Setter>       
    </Style>
   
    <Style TargetType="telerik:RadComboBox">
        <Setter Property="telerik:RadComboBox.ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Width="350" HorizontalAlignment="Left" />                   
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="GridSplitter">
        <Setter Property="Background" Value="#F1F5FB"/>
    </Style>

    <Style TargetType="{x:Type telerik:RadDatePicker}">
        <Setter Property="DateTimeWatermarkTemplate" Value="{StaticResource WatermarkTemplate}"/>
        <Setter Property="Width" Value="100" />
    </Style>

    <Style TargetType="{x:Type telerik:RadDateTimePicker}">
        <Setter Property="DateTimeWatermarkTemplate" Value="{StaticResource WatermarkTemplate}"/>
        <Setter Property="Width" Value="100" />
    </Style>

    <Style TargetType="{x:Type telerik:RadGridView}">
        <Setter Property="AlternationCount" Value="2"/>
        <Setter Property="GridLinesVisibility" Value="Vertical"/>
    </Style>
   
    <!--This removes the RadWindow.Alert, RadWindow.Confirm, RadWindow.Prompt animations-->
    <Style TargetType="telerik:RadWindow">
        <Setter Property="telerik:AnimationManager.AnimationSelector" Value="{x:Null}" />
    </Style>

    <!--Style for TextBlock-->
    <Style TargetType="TextBlock">
        <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>

    <!--Style for Tile1 text-->
    <Style x:Key="Title1" TargetType="{x:Type TextBlock}">
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Margin" Value="5 5 5 0"/>
        <Setter Property="Text" Value="N/A"/>
    </Style>

    <!--Style for Tile2 text-->
    <Style x:Key="Title2" TargetType="{x:Type TextBlock}">
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Margin" Value="5 0 5 0"/>
        <Setter Property="Text" Value="N/A"/>
    </Style>
   
    <!--Style for mandatory text-->
    <Style x:Key="MandatoryTextBlock" TargetType="{x:Type TextBlock}">       
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <!--Style for grid columns headers-->
    <Style x:Key="GridColumnsHeadersTextBlock" TargetType="{x:Type TextBlock}">
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
   
    <Style x:Key="RadButton" TargetType="telerik:RadButton">
        <Setter Property="Margin" Value="0 5 5 0" />
    </Style>

    <Style x:Key="RadButtonImage" TargetType="{x:Type Image}">
        <Setter Property="Margin" Value="5 0 0 0" />
        <Setter Property="Height" Value="24" />
        <Setter Property="Width" Value="24" />
    </Style>

    <Style x:Key="RadButtonText" TargetType="{x:Type TextBlock}">
        <Setter Property="Margin" Value="5" />
        <Setter Property="VerticalAlignment" Value="Center" />
    </Style>
   
    <!--<Style TargetType="{x:Type telerik:GridViewGroupRow}">
        <Setter Property="ShowHeaderAggregates" Value="False"/>
    </Style>-->
   
    <!--<Style TargetType="{x:Type telerik:RadGridViewCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadGridViewCell}">
                    <Border Padding="4">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>-->

    <!--<Style TargetType="DataGridCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <Border Padding="15">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>-->

</ResourceDictionary>

Code behind (I create my columns dynamically):
  private void setListColumns(string[] pColumnNames, string[] pBindingNames)
  {
   Debug.Assert(pColumnNames != null && pColumnNames.Length > 0);
   Telerik.Windows.Controls.GridViewColumnCollection allColumns = ItemsList.Columns;

   allColumns.Clear();

   for (int iIndex = 0; iIndex < pColumnNames.Length; iIndex++)
   {
    GridViewDataColumn oneColumn = new GridViewDataColumn();

    oneColumn.Header = LocGeneral.GetControlText(pColumnNames[iIndex]);
    oneColumn.DataMemberBinding = new Binding(pBindingNames[iIndex]);

    // Count aggregate.
    if (iIndex == 0)
    {
     CountFunction count = new CountFunction() { Caption = LocGeneral.GetControlText("Total") + ": " };
     oneColumn.AggregateFunctions.Add(count);
    }

    allColumns.Add(oneColumn);
   }
  }

[Yordanka]

Hi Oliver,

Here is a short video of the test I make. The cpu usage is around 2%-3%. Am I missing something? Are there additional steps I have to take in order to reproduce the problem?
 
Greetings,
Yordanka
the Telerik team

[Oliver]

Hi Yordanka,
you did it the right way ;) What we check is the "Performance" tabsheet for the cpu usage instead of the "Processes" tabsheet. In our customer situation, the cpu goes to 90% when we look at the "Performance" tabsheet.

My question is, why the cpu goes up and down when we do a mouseover, probably because the hottracking row mechanism, that's what I guess!!!

I would like to know, if I'm right, how I can disabled the hottracking row mechanism for a specific grid not for all my grid?!?

Yordanka, another thing, we create a virtual machine on our side to try finding something and the cpu going up to 60%. Also, we discover that just bringing the mouse over any Telerik controls, such a RadDatePicker, the CPU going up and down. It's like when the Telerik controls got the focus, something happen in the background.

What's is the minimum requirement we need: video card, cpu, memory, etc...

Thank's

[Yordanka]

Hello Oliver,

Since starting the capture tool (Jing) makes the monitoring of cpu usage a little bit difficult, I used Resource Monitor for the latest video. Still, I am unable to get high cpu consumption on mouse over. Here is the video. I am attaching my test application for a reference.

One thing that might help in your case is to modify the template of GridViewRow and to remove the parts for MouseOver state. If the result is the same, please send us a sample application or modify the attached one in order to demonstrate the problem. We will check what is going on and will assist you further.
 
Regards,
Yordanka
the Telerik team

[Oliver]

Hi Yordanka,

I saw the video but the fact is I still have the problem on our side :( Your approach of modifying the template of GridViewRow and to remove the parts for MouseOver state are interesting but how I can acheive this, we don't have Blend:( ?

Thank's

[Yordanka]

Hi Oliver,

You can find the template of GridViewRow in this file from your installation:

C:\Program Files (x86)\Telerik\RadControls for WPF Q2 2012\Themes.Implicit\WPF40\OfficeBlue\Themes\Telerik.Windows.Controls.GridView.xaml

I've updated the test project as well.
 

Greetings,
Yordanka
the Telerik team

[Oliver]

Hi Yordanka,

I think were not to far from my solution, I'm on .Net 3.5 :(

Thank's

[Yordanka]

Hello Oliver,

I've converted the project to .NET35 and added the corresponding GridViewRow template. The template can be found here: C:\Program Files (x86)\Telerik\RadControls for WPF Q2 2012\Themes.Implicit\WPF35\OfficeBlue\Themes\Telerik.Windows.Controls.GridView.xaml 

Attached is the sample project of a grid without mouse over state.
 
Regards,
Yordanka
the Telerik team

[Robert]

I have exactly the same problem. However, I've worked out that the problem is because my RadGridView is contained within a RadTabControl. I believe it has something to do with the ScrollViewer built into RadTabControl which I suppose will incur an infinite height/width value.

When I locate the GridView out of the TabControl it works fine.

You can read more on the issue here:
http://www.telerik.com/help/silverlight/gridview-troubleshooting-performance.html