Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

zoomOut() method not working

5 Answers 137 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 12 Feb 2009, 02:56 PM
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

5 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 13 Feb 2009, 04:35 PM
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.
0
Keith
Top achievements
Rank 1
answered on 13 Feb 2009, 06:28 PM
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> 
0
Accepted
Giuseppe
Telerik team
answered on 16 Feb 2009, 05:20 PM
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.
0
Keith
Top achievements
Rank 1
answered on 25 Feb 2009, 04:46 PM
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
0
Giuseppe
Telerik team
answered on 26 Feb 2009, 11:10 AM
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.
Tags
Chart (Obsolete)
Asked by
Keith
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Keith
Top achievements
Rank 1
Share this question
or