RadTileView/RadChart rendering problem in Chrome

[Sherwin]

We have a silverlight application that uses RadTileView with 4 items and one of them is using RadGridView and RadChart side by side. We are seeing problem in rendering the chart only when using Google Chrome browser (see the attached screenshot). The problem happens when switching from one view item to this particular view. It looks like TileView captured the bitmap of the chart during the view switching animation (I guess). If I resize the window after this problem happened, the chart refreshes itself and it will not have the problem anymore. So it happens only at first display of this view and also intermittently. 

Again, this problem only happens in Google Chrome browser, we don't see this in other browser (IE, Firefox, Safari). We are currently using the 2011.Q1 release.

I am posting this problem maybe you guys have a quick advice. I'll try to reproduce this problem on a separate small project so that I send that and you guys can investigate further but if any quick thoughts that you may have, that will be great. 

Thanks,
Sherwin

[Zarko]

Hi Sherwin,
Unfortunately I wasn't able to reproduce your problem so we'll be really glad if you could send us a sample project or at least some code snippets. Also could you please tell us the exact dll version that you using? I've attached the sample project that I used for testing so you could examine it and see if it is of any help to you.

Regards,
Zarko
the Telerik team

[Richard]

Also having the same problem.  Only happens in Chrome...  Seems to be related to intensive processing during animation....   This is not consistent but happens when other Widgets in application are also rendering at same time. 

[Sherwin]

Hi Zarko,

Sorry for the late response, been very busy this past couple of weeks.
 
The exact version of dll we're using is 2011.1.419.1040. I'll try to modify your sample project and see if I can replicate the issue.

Thanks,
Sherwin

[Sherwin]

Hello Zarko,

I tried changing your sample project but couldn't reproduce.  

As a workaround, I was trying to attach to LayoutChangeEnded event and do an UpdateLayout in the RadChart but this event doesn't seems to be firing. Any other way to determine that the tile has completed its animation?

Anyway, here are some snippet of our code using TileView and Radchart. Note the LargeContent of 'Utilization' tile contains a view with a RadChart.

<telerik:RadTileView x:Name="ProcDetlTileView"
                     Grid.Row="1"
                     Style="{StaticResource BRSTileViewStyle}"
                     MaximizeMode="ZeroOrOne"
                     TileStateChangeTrigger="DoubleClick"
                     MinimizedColumnWidth="196"
                     MinimizedRowHeight="186"
                     IsItemsAnimationEnabled="{Binding IsAnimationEnabled}"
                     IsAnimationOptimized="True">
    <telerik:RadTileViewItem x:Name="RBRVSTile"
                             Header="RBRVS Policy Indicators"
                             Style="{StaticResource BRSTileViewItemStyle}"
                             TileState="Maximized"
                             Foreground="{StaticResource BRSDarkGray}"
                             TileStateChanged="TileStateChanged">
        <telerik:RadFluidContentControl NormalToLargeThreshold="196, 186"
                                        LargeToNormalThreshold="196, 186">
            <telerik:RadFluidContentControl.Content>
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="110" />
                        <ColumnDefinition Width="40" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="22" />
                        <RowDefinition Height="22" />
                        <RowDefinition Height="22" />
                        <RowDefinition Height="22" />
                        <RowDefinition Height="22" />
                        <RowDefinition Height="22" />
                    </Grid.RowDefinitions>
                    <TextBlock Text="Payment basis:" Grid.Row="0" Grid.Column="0" Style="{StaticResource LabelStyle}" />
                    <TextBlock Text="PCTC indicator:" Grid.Row="1" Grid.Column="0" Style="{StaticResource LabelStyle}" />
                    <TextBlock Text="Berenson-Eggers:" Grid.Row="2" Grid.Column="0" Style="{StaticResource LabelStyle}" />
                    <TextBlock Text="Medicare status:" Grid.Row="3" Grid.Column="0" Style="{StaticResource LabelStyle}" />
                    <TextBlock Text="Global surgical day:" Grid.Row="4" Grid.Column="0" Style="{StaticResource LabelStyle}" />
                    <TextBlock Text="Physician indicator:" Grid.Row="5" Grid.Column="0" Style="{StaticResource LabelStyle}" />
                    <TextBlock x:Name="PaymentBasis" Text="{Binding Path=RBRVSCBDescription}" Grid.Row="0" Grid.Column="1" Style="{StaticResource DataStyle}" />
                    <TextBlock x:Name="PCTCInd" Text="{Binding Path=RBRVSPCTCIndicator}" Grid.Row="1" Grid.Column="1" Style="{StaticResource DataStyle}" />
                    <TextBlock x:Name="BETOS" Text="{Binding Path=RBRVSBETOS}" Grid.Row="2" Grid.Column="2" Style="{StaticResource DataStyle}" />
                    <TextBlock x:Name="MedStatus" Text="{Binding Path=RBRVSStatus}" Grid.Row="3" Grid.Column="1" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2,0,0,0" />
                    <TextBlock x:Name="GlobDays" Text="{Binding Path=RBRVSGlobalSurgicalDays}" Grid.Row="4" Grid.Column="1" Style="{StaticResource DataStyle}" />
                    <TextBlock x:Name="PhyInd" Text="{Binding Path=RBRVSPhysicianIndicator}" Grid.Row="5" Grid.Column="1" Style="{StaticResource DataStyle}" />
                </Grid>
            </telerik:RadFluidContentControl.Content>
            <telerik:RadFluidContentControl.LargeContent>
                <view:RBRVSControlView x:Name="RBRVSControlViewInstance" Margin="0,5,0,0" />
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </telerik:RadTileViewItem>
    <telerik:RadTileViewItem x:Name="UtilizationTile"
                             Header="Utilizations"
                             Style="{StaticResource BRSTileViewItemStyle}"
                             Foreground="{StaticResource BRSDarkGray}"
                             TileStateChanged="TileStateChanged">
        <telerik:RadFluidContentControl NormalToLargeThreshold="196, 186"
                                        LargeToNormalThreshold="196, 186">
            <telerik:RadFluidContentControl.Content>
                <view:ProcedureDetailsUtilizationSmallChart x:Name="UtilizationSmallChartView"
                                                            Margin="0"
                                                            HorizontalAlignment="Stretch"
                                                            VerticalAlignment="Stretch" />
            </telerik:RadFluidContentControl.Content>
            <telerik:RadFluidContentControl.LargeContent>
                <view:UtilizationControlView x:Name="UtilizationControlViewInstance" Margin="0,5,0,0" />
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </telerik:RadTileViewItem>
    <telerik:RadTileViewItem x:Name="CCIEditsTile"
                             Header="{Binding Path=CCIEditShortTitle}"
                             Style="{StaticResource BRSTileViewItemStyle}"
                             Foreground="{StaticResource BRSDarkGray}"
                             TileStateChanged="TileStateChanged">
        <telerik:RadFluidContentControl NormalToLargeThreshold="196, 186"
                                        LargeToNormalThreshold="196, 186">
            <telerik:RadFluidContentControl.Content>
                <TextBlock Text="{Binding Path=CciEditsMessage}"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Foreground="Gray"
                           TextWrapping="Wrap"
                           Margin="5" />
            </telerik:RadFluidContentControl.Content>
            <telerik:RadFluidContentControl.LargeContent>
                <view:CCIEditControlView x:Name="CCIEditControlViewInstance" Margin="0,5,0,0" />
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </telerik:RadTileViewItem>
    <telerik:RadTileViewItem x:Name="HistoryTile"
                             Header="History"
                             Style="{StaticResource BRSTileViewItemStyle}"
                             Foreground="{StaticResource BRSDarkGray}"
                             TileStateChanged="TileStateChanged">
        <telerik:RadFluidContentControl NormalToLargeThreshold="196, 186"
                                        LargeToNormalThreshold="196, 186">
            <telerik:RadFluidContentControl.Content>
                <histview:HistorySmallChart x:Name="HistorySmallChartView"
                                            Margin="0"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch" />
            </telerik:RadFluidContentControl.Content>
            <telerik:RadFluidContentControl.LargeContent>
                <view:HistoryControlView x:Name="HistoryControlViewInstance" />
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </telerik:RadTileViewItem>
</telerik:RadTileView>

Radchart:

<telerik:RadChart x:Name="UtilizationChart" Grid.Row="1" BorderThickness="0"
                  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                  MinFullWidth="50" MinWidth="50"
                  ItemsSource="{Binding Path=UtilizationGridDataSource}"
                  Visibility="{Binding Path=UtilizationMessage, Converter={StaticResource StrToVisibility}}">
    <telerik:RadChart.Background>
        <LinearGradientBrush>
            <GradientStop Color="White" Offset="0" />
        </LinearGradientBrush>
    </telerik:RadChart.Background>
    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView ChartLegendPosition="Bottom">
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea LegendName="UtilizationChartLegend"
                               EnableAnimations="False"
                               LabelFormatBehavior="None"
                               FontSize="10" FontWeight="Bold"
                               ItemClick="ChartAreaItemClick" />
            </telerik:ChartDefaultView.ChartArea>
            <telerik:ChartDefaultView.ChartLegend>
                <telerik:ChartLegend x:Name="UtilizationChartLegend"
                                 Header="Legend <Specialty Code> <Modifier>:"
                                 Style="{StaticResource LegendStyle}"
                                 FontSize="10" Width="Auto"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 BorderThickness="0"
                                 Padding="0"
                                 ItemsPanelOrientation="Vertical"
                                 LegendItemMarkerShape="Square" Background="{StaticResource BRSGrayColorBrush}"
                                 MouseLeftButtonDown="LegendMouseLeftButtonDown"/>
            </telerik:ChartDefaultView.ChartLegend>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>
    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping >
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="YValue" FieldName="TOTAL" />
            </telerik:SeriesMapping.ItemMappings>
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:PieSeriesDefinition ItemLabelFormat="#%{p1}"
                                         LegendItemLabelFormat="#DATAITEM.SPECIALTY #DATAITEM.MOD1"
                                         ShowItemToolTips="True"
                                         ItemToolTipFormat="#DATAITEM.SPECIALTY_DESCRIPTION #DATAITEM.MOD1">
                    <telerik:PieSeriesDefinition.InteractivitySettings>
                        <telerik:InteractivitySettings SelectionMode="Single" SelectionScope="Item" />
                    </telerik:PieSeriesDefinition.InteractivitySettings>
                </telerik:PieSeriesDefinition>
            </telerik:SeriesMapping.SeriesDefinition>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

Thanks,
Sherwin

[Petar Mladenov]

Hi Sherwin,

The LayoutChangeEnded event is obsolete and that is why it does not fire. Could you please try to use the StateChanged event of the FluidContentControl instead and let us know if it works for you ? Furthermore , you can also try to use Dispatcher to provide an asynchronous invocation of the UpdateLayout methods.
Please let us know if this helped you.

Best wishes,
Petar Mladenov
the Telerik team

[Misha]

Hello Petar,

Do you know if there was anything resolved with this issue? My company is using the RadChart without the RadTileView and this problem occurs randomly in Chrome. We are using Telerik v2011.1.419.1040. I attached a screenshot of the problem; sometimes when we close the chart and open it back up, the problem goes away, but sometimes it persists. I tried to asynchronously call Update Layout on the chart and also the charts default view chart area when SizeChanged occurs, but the problem still occurs. Let me know if you need a link to our live site so you can see this problem in action.

Thanks,
Misha

[Evgenia]

Hi Sherwin,

  Thanks for the attached image. However this seems to be a problem of the SL 4 plug-in and its interoperability with Chrome. I believe you understand that this is beyond our support scope for the control. We suggest that you ask your question in Microsoft's official SL forum.

Kind regards,
Evgenia
the Telerik team