This is a migrated thread and some comments may be shown as answers.

Kendo & ASP.NET AJAX ScriptManager incompatibility?

4 Answers 393 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Ian asked on 22 Dec 2011, 11:40 AM

Hi,
I've got an existing web application that uses your ASP.NET AJAX library. it includes a number of pages where I can see that adding charts generated by the Kendo DataViz components would be really useful.

I've tried creating a test page that incorporates the client-side code from your Kendo 'Basic usage column chart' demo and it works fine. However, as soon as I add a RadScriptManager control to the page (which is needed by other ASP.NET AJAX controls) it generates an error 'Error: Object doesn't support property or method 'kendoChart'.

I've included my test page below. If you remove the three lines starting '<asp:ScriptReference...' the Kendo chart works again. I appreciate there are two copies of the JQuery library being loaded but removing the <script type="text/javascript" src="../Scripts/jquery.min.js"></script> line doesn't help either.

Is it possible to use Kendo components with a page that uses the RadScriptManager and other ASP.NET AJAX controls?

<!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>
   <link href="../Styles/examples.css" rel="stylesheet"/>
   <link href="../Styles/examples-offline.css" rel="stylesheet"/>
   <link href="../Styles/kendo.common.min.css" rel="stylesheet"/>
   <link href="../Styles/kendo.default.min.css" rel="stylesheet"/>

   <script type="text/javascript" src="../Scripts/jquery.min.js"></script>
   <script type="text/javascript" src="../Scripts/kendo.core.js"></script>
   <script type="text/javascript" src="../Scripts/kendo.data.js"></script>
   <script type="text/javascript" src="../Scripts/kendo.chart.js"></script>
</head>

<body>
   <form id="form1" runat="server">
       <telerik:RadScriptManager ID="rsmMain" Runat="server">
           <Scripts>
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
           </Scripts>
       </telerik:RadScriptManager>

       <div id="chart"></div>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#chart").kendoChart({
                   title: {
                       text: "My Chart Title"
                   },
                   series: [
                               {
                      name: "Series 1",
                      data: [200, 450, 300, 125]
                               }
                       ],
                   categoryAxis: {
                       categories: [2000, 2001, 2002, 2003]
                   }
               });
           });
       </script>
   </form>
</body>
</html>

4 Answers, 1 is accepted

answered on 22 Dec 2011, 01:16 PM

Hello Ian,

The problem is caused by the fact that there are two jQuery instances on the page. The second one is registered by the RadScriptManager and it overwrites the first one. As a result, the jQuery plugin definitions are lost (the Kendo widgets are in fact jQuery plugins).

The Kendo scripts should be registered on the page after the jQuery file. The RadScriptManager renders its <script> tags at the end of the <head>, so you need to place the Kendo scripts in the <body>.

You should also keep in mind that the jQuery registered by the RadScriptManager may be older and not compatible with Kendo UI, that currently works with jQuery 1.7.1. In this case you can register a custom jQuery via the RadScriptManager:

<asp:ScriptReference
Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"
Path="[path_to_your_jquery.js]" />

Regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 22 Dec 2011, 02:37 PM

Hi Dimo,
Thanks for the quick reply. You were right - moving the Kendo script tags after the RadScripManager fixed the problem.

In order to share a single version of the jQuery library between Kendo and the Rad Controls, is the code below OK? I found that I had to remove the Assembly and Name tags from the second ScriptReference statment otherwise I encountered an 'Error: Unable to get value of the property 'extend': object is null or undefined' error.

<telerik:RadScriptManager ID="rsmMain" Runat="server">
           <Scripts>
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
               <asp:ScriptReference Path="../Scripts/jquery.min.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
           </Scripts>
       </telerik:RadScriptManager>

       <script type="text/javascript" src="../Scripts/kendo.core.js"></script>
       <script type="text/javascript" src="../Scripts/kendo.data.js"></script>
       <script type="text/javascript" src="../Scripts/kendo.chart.js"></script>

Best regards, Ian

Accepted