RadChart won't zoom out when in RadAjaxPanel

[Chris]

I'm having problems zooming out my RadChart. I have a telerik:RadButton that calls a script to zoomOut on the RadChart but it seems that the zoom out is overwritten by an Ajax refresh that sets the chart back to where it was. 

I've read that RadScriptBlock runs after Ajax refresh but this does not seem to resolve the issue.

Looking at this thread http://www.telerik.com/community/forums/aspnet-ajax/chart/zoomout-method-not-working.aspx#742256
I can see the answer here was the use of an asp:Button and, yes this solution works. But the same solution does
not seem to work when the button that calls the script is a <telerik:RadButton>

            <div id="div3">
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">

                <telerik:RadButton ID="RadButton1" runat="server" text="Zoom Out" onclientclicked="ZoomOutChart1" >
                </telerik:RadButton>

                
                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                        <script type="text/javascript">
                            function ZoomOutChart1() {
                                //scale XAxis by factor 3 
                                var chart = $find("<%=RadChart1.ClientID%>");
                                if (chart != null)
                                    chart.zoomOut();
                            }
                        </script>
                    </telerik:RadScriptBlock>

                <telerik:RadChart ID="RadChart1" runat="server" DefaultType="Line" 
                     Height="500px" Width="500px" Skin="BabyBlue"> <%-- --%>
                    <Appearance>
                        <FillStyle MainColor="239, 255, 254">
                        </FillStyle>
                        <Border Color="188, 229, 231" Width="8" />
                    </Appearance>
                    <Series>
                        <telerik:ChartSeries Name="Series 1" Type="Line">
                            <Appearance>
                                <FillStyle MainColor="194, 230, 252" FillType="Solid">
                                </FillStyle>
                                <TextAppearance TextProperties-Color="78, 168, 188">
                                </TextAppearance>
                                <Border Color="177, 215, 250" />
                            </Appearance>
                        </telerik:ChartSeries>
                    </Series>
                    <ClientSettings EnableZoom="true" ScrollMode="XOnly" XScale="4" /><%-- --%>
                </telerik:RadChart>
               </telerik:RadAjaxPanel>
            </div>

If I comment out the RadAjaxPanel then zoom out works fine
If I replace the telerik:RadButton with an asp:Button it also works fine

my server side code is as follows:

  protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            int[] intArray = new int[100];
            Random random = new Random();

            int currentValue = 50;
            for (int pos = 0; pos < 100; pos++)
            {
                currentValue += random.Next(-5, 5);
                intArray[pos] = currentValue;
            }

            RadChart1.DataSource = intArray;
            RadChart1.DataBind();
            RadChart1.ClientSettings.EnableAxisMarkers = false;
            RadChart1.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;
            RadChart1.PlotArea.XAxis.Appearance.MinorGridLines.Visible = false;

            RadChart1.PlotArea.XAxis.Appearance.MinorGridLines.Visible = false;
            RadChart1.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;
        }

[Maria Ilieva]

Hi Chris,

Could you please test the same scenario with regular asp UpdatePanel instead of RadAjaxPanel and verify if this makes any difference?

Kind regards,
Maria Ilieva
the Telerik team