zoomOut() method not working

Thread is closed for posting
6 posts, 1 answers
  1. Keith
    Keith avatar
    10 posts
    Member since:
    Feb 2009

    Posted 12 Feb 2009 Link to this post

    Hello there... after looking at the Client-Side API, I am trying to implement the client side coding for zooming out from a chart after zooming in.

    I added a Button control and set its OnClientClick property in this way:

    <asp:Button ID="btnZoomOut" runat="server" Text="ZOOM OUT" OnClientClick="return ZoomOut();" />

     

     

    I also added this JavaScript code to page...

    <script type="text/javascript">
           
        function ZoomOut()
        {
            alert("Hello");
            var chart = document.getElementById("RadChart1");
            chart.zoomOut();
           

            //var chart = document.forms["form1"].RadChart1.ClientID;
            //chart.zoomOut();
        }
       
    </script>


    But I get the following error message when the page loads...

    The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

    So I tried altering the following JavaScript to reach the RadChart1 control a different way...

    <script type="text/javascript">

    function ZoomOut()

    {
    alert("Hello");
    var chart = document.getElementById("RadChart1");
    chart.zoomOut();
    }

    </script>


    But the zoomOut() method does not perform. For the second implementation, I know the JavaScript function is called because the alert message appears. It just does not run the zoomOut() method on the chart var.

    Thanks for any guidance with it.

    ---Keith
  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 13 Feb 2009 Link to this post

    Hi Keith,

    We would suggest you to review the general troubleshooting section here.

    If you receive exceptions such as "System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks" you need to move the code block (i.e. <% ... %>) outside of the head tag:

    Incorrect:
     <head runat="server"
      <script type="text/javascript"
      var grid = $find('<%= RadGrid1.ClientID %>'); 
      ... 
      </script> 
    </head> 
    <body> 
    ... 
    </body>  

    Correct:
     <head runat="server"
    <telerik:RadCodeBlock id="RadCodeBlock1" runat="server"
       <script type="text/javascript"
           var grid = $find('<%= RadGrid1.ClientID %>'); 
           ... 
       </script> 
    </telerik:RadCodeBlock> 
    </head> 
    <body> 
    ... 
    </body> 
    or 
    <head runat="server"
    </head> 
    <body> 
       <telerik:RadCodeBlock id="RadCodeBlock1" runat="server"
       <script type="text/javascript"
           var grid = $find('<%= RadGrid1.ClientID %>'); 
           ... 
       </script> 
       </telerik:RadCodeBlock> 
    </body>    


    Also, you cannot use document.getElementsById(...) calls to access the client-side RadChart object as document.getElementById (...) would return a DOM element -- you should use $find(...) call instead.


    Hope this helps.


    Best wishes,
    Manuel
    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.
  3. Keith
    Keith avatar
    10 posts
    Member since:
    Feb 2009

    Posted 13 Feb 2009 Link to this post

    Hey Manuel... thanks for the reply. Your suggestion has pushed me by the exception message I was receiving, but the zoomOut() call still does not change the rendering of the chart. After the method performs, the chart looks the same as did after the zoom in. I am posting the code on the presentation page here. Can you see anything that I am missing?

    <head runat="server">  
        <title>Untitled Page</title>  
       
     
        <telerik:RadCodeBlock id="RadCodeBlock1" runat="server">   
            <script type="text/javascript">  
                  
                function ZoomOut()  
                {  
                    //alert("Hello");  
                    var chart = $find("<%= RadChart1.ClientID %>");  
                    chart.zoomOut();  
                    //chart.resetZoom();  
                      
                }  
                  
            </script>  
        </telerik:RadCodeBlock>   
    </head>  
     
    <body>  
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
        <div>  
            <asp:Button ID="btnZoomOut" runat="server" Text="ZOOM OUT" OnClientClick="return ZoomOut();" />  
            <telerik:RadChart ID="RadChart1" runat='server' DataSourceID="sdsNetMon"   
                DefaultType="Line" Width="600px" Skin="DeepRed">  
                <ClientSettings EnableZoom="true" ScrollMode="Both" />  
                <ChartTitle>  
                    <TextBlock Text="RadChart for NetMon">  
                    </TextBlock>  
                </ChartTitle>  
                              
            </telerik:RadChart>  
              
        </div>  
        </form>  
    </body> 
  4. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 16 Feb 2009 Link to this post

    Hello Keith,

    You only need to modify the Button.OnClientClick attribute declaration like this OnClientClick="ZoomOut(); return false;":

    <head id="Head1" runat="server"
        <title>Untitled Page</title> 
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
     
            <script type="text/javascript">   
                   
                function ZoomOut()   
                {    
                    var chart = $find("<%= RadChart1.ClientID %>");   
                    chart.zoomOut();   
                }   
                   
            </script> 
     
        </telerik:RadCodeBlock> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
            <div> 
                <asp:Button ID="btnZoomOut" runat="server" Text="ZOOM OUT" OnClientClick="ZoomOut(); return false;" /> 
                <telerik:RadChart ID="RadChart1" runat='server' DefaultType="Line" Width="600px" 
                    Skin="DeepRed"
                    <ClientSettings EnableZoom="true" ScrollMode="Both" /> 
                    <ChartTitle> 
                        <TextBlock Text="RadChart for NetMon"
                        </TextBlock> 
                    </ChartTitle> 
                </telerik:RadChart> 
            </div> 
        </form> 
    </body> 


    Hope this helps.


    All the best,
    Manuel
    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.
  5. Keith
    Keith avatar
    10 posts
    Member since:
    Feb 2009

    Posted 25 Feb 2009 Link to this post

    Hey Manuel---

    Thanks again for your reply. The correction made to the OnClientClick attribute did the trick. The zoomOut() method is now working fine. You guys have done a great job both with your components and with the documentation available to developers. I am wondering why the Telerik:RadCodeBlock tags are not included in the Client Side coding documentation... it seems like that would be a commonly used piece of code and your suggestion to include it definitely got me through one of the major problems I faced when first approaching the Chart component zoom feature. I combed through the doc pretty carefully prior to submitting the forum post, but I may have missed it. Is it there somewhere in the doc?

    Thanks again for your help!

    ---Keith
  6. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 26 Feb 2009 Link to this post

    Hi Keith,

    The RadCodeBlock documentation can be found here as it is most commonly used in AJAX-related scenarios. Still, we will consider how to expose it so it is easier to spot in scenarios like this one.


    Greetings,
    Manuel
    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.
Back to Top