Kendo & ASP.NET AJAX ScriptManager incompatibility?

5 posts, 1 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 22 Dec 2011 Link to this post

    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>
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 22 Dec 2011 Link to this post

    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
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Dec 2011 Link to this post

    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!
  6. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 25 May 2012 Link to this post

    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?
Back to Top
Kendo UI is VS 2017 Ready