RadTileView/RadChart rendering problem in Chrome

8 posts, 0 answers
  1. Sherwin
    Sherwin avatar
    22 posts
    Member since:
    Jan 2011

    Posted 03 Jun 2011 Link to this post

    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
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 08 Jun 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Richard
    Richard avatar
    2 posts
    Member since:
    May 2011

    Posted 21 Jun 2011 Link to this post

    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. 

  5. Sherwin
    Sherwin avatar
    22 posts
    Member since:
    Jan 2011

    Posted 21 Jun 2011 Link to this post

    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


  6. Sherwin
    Sherwin avatar
    22 posts
    Member since:
    Jan 2011

    Posted 24 Jun 2011 Link to this post

    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

  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 27 Jun 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Misha
    Misha avatar
    12 posts
    Member since:
    Aug 2012

    Posted 09 Jan 2012 Link to this post

    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
  9. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 12 Jan 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
DevCraft banner