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

Kendo & ASP.NET AJAX ScriptManager incompatibility?

4 Answers 339 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
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

Sort by
0
Dimo
Telerik team
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!
0
Ian
Top achievements
Rank 1
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
0
Accepted
Dimo
Telerik team
answered on 22 Dec 2011, 02:46 PM
Hello Ian,

Yes, you are good to go.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Barbaros Saglamtimur
Top achievements
Rank 1
answered on 25 May 2012, 10:29 AM
I would like to use Telerik ASP.NET AJAX and KendoUI side by side. So I have exactly same scenario, and by implement what I have read at this thread, I am still having  'Error: Unable to get value of the property 'extend': object is null or undefined' error and visual studio hangs.
What am I missing?
Tags
General Discussions
Asked by
Ian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ian
Top achievements
Rank 1
Barbaros Saglamtimur
Top achievements
Rank 1
Share this question
or