RadChart won't zoom out when in RadAjaxPanel

2 posts, 0 answers
  1. Chris
    Chris avatar
    1 posts
    Member since:
    Jan 2013

    Posted 19 Apr 2013 Link to this post

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

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

    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.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;
  2. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 24 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top