Hi,
I need to place two RadCharts on same page and they have to be updated with the same event. When the update gets triggered by RadAjaxManager, the second defined graph in AjaxUpdateControl always flickers. Here is the example code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GraphFlicker.aspx.cs" Inherits="Application_Test_GraphFlicker" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Charting" tagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function pageLoad() {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Button runat="server" ID="btn1" Text="Test" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="btn1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="btn1" LoadingPanelID="LoadingPanel" />
<telerik:AjaxUpdatedControl ControlID="RadChart1" LoadingPanelID="LoadingPanel" />
<telerik:AjaxUpdatedControl ControlID="RadChart2" LoadingPanelID="LoadingPanel" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="Vista" />
<telerik:RadChart ID="RadChart1" runat="server" SkinsOverrideStyles="false" Width="240px" Height="400px" ChartTitle-TextBlock-Text="Chart" ChartTitle-Appearance-Visible="false">
<PlotArea Appearance-Dimensions-Margins="0px">
<XAxis MaxValue="5" MinValue="1" Step="1">
</XAxis>
<YAxis MaxValue="25" Step="5">
</YAxis>
<YAxis2 MaxValue="5" MinValue="1" Step="1">
</YAxis2>
</PlotArea>
<Series>
<telerik:ChartSeries Name="Series 1" Type="Pie" Appearance-ShowLabels="true" Appearance-LegendDisplayMode="Nothing" >
<Items>
<telerik:ChartSeriesItem YValue="60" Name="F" Label-TextBlock-Text="F #%" ></telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="20" Name="P" Label-TextBlock-Text="P #%" Label-Appearance-Visible="true"></telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="20" Name="C" Label-TextBlock-Text="C #%" ></telerik:ChartSeriesItem>
</Items>
</telerik:ChartSeries>
</Series>
</telerik:RadChart>
<telerik:RadChart ID="RadChart2" runat="server" SkinsOverrideStyles="false" Width="240px" Height="400px" ChartTitle-TextBlock-Text="Chart" ChartTitle-Appearance-Visible="false">
<PlotArea Appearance-Dimensions-Margins="0px">
<XAxis MaxValue="5" MinValue="1" Step="1">
</XAxis>
<YAxis MaxValue="25" Step="5">
</YAxis>
<YAxis2 MaxValue="5" MinValue="1" Step="1">
</YAxis2>
</PlotArea>
<Series>
<telerik:ChartSeries Name="Series 1" Type="Pie" Appearance-ShowLabels="true" Appearance-LegendDisplayMode="Nothing" >
<Items>
<telerik:ChartSeriesItem YValue="60" Name="F" Label-TextBlock-Text="F #%" ></telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="20" Name="P" Label-TextBlock-Text="P #%" Label-Appearance-Visible="true"></telerik:ChartSeriesItem>
<telerik:ChartSeriesItem YValue="20" Name="C" Label-TextBlock-Text="C #%" ></telerik:ChartSeriesItem>
</Items>
</telerik:ChartSeries>
</Series>
</telerik:RadChart>
</form>
</body>
</html>
If I replace the two graphs with asp:Panel, they work as expected, no flicker at all:
<asp:Panel ID="RadChart1" runat="server" Width="240px" Height="400px" BackColor="Red">
</asp:Panel>
<asp:Panel ID="RadChart2" runat="server" Width="240px" Height="400px" BackColor="Blue">
</asp:Panel>
Thanks,
Teo
4 Answers, 1 is accepted
Rank 1
I also tried wrapping both graphs in an a single asp:Panel with the same result, except that now the graph that flickers is random, not the one defined as second.
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="btn1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="btn1" LoadingPanelID="LoadingPanel" />
<telerik:AjaxUpdatedControl ControlID="pnlTest" LoadingPanelID="LoadingPanel" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="Vista" />
<asp:Panel ID="pnlTest" runat="server">
RadCharts here...
</asp:Panel>
Thanks.
This is indeed a strange issue and unfortunately I am not able to replicate it in my local tests. Can you please verify that you are using the latest version 2009.1.527 of RadControls for ASP.NET AJAX in your project and provide a live url where the flicker can be seen? Thus I will do everything possible to provide an appropriate explanation/fix.
Kind regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
Sebastian,
Yes, I am using 2009.1.527.35.
You can test the page at http://66.237.238.206/graph/test/Graphflicker.aspx
I am using IE8 and FF 3.0.10.
Thank you,
Teo
Thank you for the live test page. I was able to reproduce the flicker locally and suspect that this is due to the way images are refreshed when ASP.NET AJAX is used.
Can you please test the same case by disabling the RadAjaxManager temporary and wrapping the chart instances inside regular MS UpdatePanel? Do you observe the same effect with this configuration? You may also compare the result when using two instances of standard asp Image of charts and share the results with us.
Kind regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.