Kendo Version Issue

7 posts, 0 answers
  1. CDK
    CDK avatar
    7 posts
    Member since:
    Feb 2013

    Posted 11 Dec 2014 Link to this post

    I'm trying to add a RadMap (2014.2.618.45) to an existing application that uses Kendo UI (2014.1.318). When both the RadMap and Kendo UI libraries are on the same page, there are javascript and CSS issues. An example is TypeError: l.kendoWidget is undefined. What version of the Kendo libraries are used in the RadMap? Any ideas on how to get these to work on the same page?

    Thanks!
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 Dec 2014 Link to this post

    Hello,

    I tried to reproduce the encountered issue, but on my end using two maps, one from RadMap and one from Kendo map works fine and I am unable to encounter JavaScript errors.

    Also, the only visual issue I can see is with the navigation buttons, which can be easily resolved with this CSS rule:
    .RadMap .k-icon {
        font-size:12px;
        background-image: none;
    }

    You can find attached a simple ASP.NET page with which I tested the problem described. Note that you should add the Telerik.Web.UI assembly and the Kendo-related resources.

    Regards,
    Ianko
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CDK
    CDK avatar
    7 posts
    Member since:
    Feb 2013

    Posted 12 Dec 2014 in reply to Ianko Link to this post

    Thanks for the CSS rule fix, that worked. I don't have the same js dataviz library setup as your sample. Here is simple example that produces the javascript error. I see the error in the error console in FireBug on FireFox 34.05. The errors also appear in Chrome 39.0.2171.71 m developer tools. If I remove kendo.web.min.js there are no errors. As I stated in my previous post, I'm integrating the RadMap into an existing application that is using 2014.1.318/kendo.web.min.js and the kendoDatePicker.


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
        
        <head runat="server">
            <title></title>
            <link href="/Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" type="text/css" />
            <link href="/Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" type="text/css" />
        </head>

        <body>
            <form id="form1" runat="server">
            
       <asp:ScriptManager ID="ScriptManager1" 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" />
       </Scripts>
       </asp:ScriptManager>

                <div>
                    <input  id="txtDatePicker" />
                </div>
            
                <div>
           <telerik:RadMap runat="server" ID="RadMap1">
           <LayersCollection>
           <telerik:MapLayer Type="Tile" 
                                              UrlTemplate="http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png" 
                                              Subdomains="a,b,c"
                         Attribution="© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"></telerik:MapLayer>
           </LayersCollection>
           </telerik:RadMap> 
                </div>
            
                <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
                <script src="/Scripts/kendo/2014.1.318/kendo.web.min.js" type="text/javascript"></script>
            
                <script type="text/javascript">

                    $("#txtDatePicker").kendoDatePicker({
                        start: "year",
                        depth: "year",
                        format: "MM/dd/YYYY"
                    });

                </script>

            </form>
        
        </body>
    </html>


  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 17 Dec 2014 Link to this post

    Hello,

    The problem is with the additional jQuery reference. Perhaps there are some version collisions, i.e, using the jQuery 1.9.1 overrides the jQuery that serves the RadMap.

    I suggest using the jQueryInclude.js file and remove the manual reference.

    Example:
    <asp:ScriptManager ID="ScriptManager1" 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" />
            <asp:ScriptReference Path="/Scripts/kendo/2014.1.318/kendo.web.min.js"/>
        </Scripts>
    </asp:ScriptManager>
     
    <div>
        <input id="txtDatePicker" />
    </div>
     
    <div>
        <telerik:RadMap runat="server" ID="RadMap1">
            <LayersCollection>
                <telerik:MapLayer Type="Tile"
                    UrlTemplate="http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                    Subdomains="a,b,c"
                    Attribution="© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>">
                </telerik:MapLayer>
            </LayersCollection>
        </telerik:RadMap>
    </div>
     
    <script type="text/javascript">
     
        $("#txtDatePicker").kendoDatePicker({
            start: "year",
            depth: "year",
            format: "MM/dd/YYYY"
        });
     
    </script>


    Regards,
    Ianko
    Telerik
  6. CDK
    CDK avatar
    7 posts
    Member since:
    Feb 2013

    Posted 19 Dec 2014 in reply to Ianko Link to this post

    Removing the manual reference eliminated the error. Unfortunately, my script manager and the manual jQuery reference are in the master page.  I use a CDN for jQuery. I thought the jQuery reference that ships with the webform controls uses noConflict() to stop collisions from happening. What version of jQuery is shipped with Telerik ASP.NET 2014.2.618.45?
  7. CDK
    CDK avatar
    7 posts
    Member since:
    Feb 2013

    Posted 19 Dec 2014 in reply to Ianko Link to this post

    Also, kendo 2014.1.318 requires  jQuery 1.9.1.
  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 22 Dec 2014 Link to this post

    Hi,

    You can refer to the Using jQuvery article on the matter for the required version.

    As for the script manager, you can safely include the jQuery in the master page (jQueryInclude.js), whereas the Kendo library manually to include it in the head placeholder of the desired aspx page. 

    Indeed, conflicts should not appear, although, including the jQuery multiple times is not a recommended technique.

    Regards,
    Ianko
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017