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!
Thanks!
6 Answers, 1 is accepted
0
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:
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
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
0
CDK
Top achievements
Rank 1
Rank 1
answered on 12 Dec 2014, 08:25 PM
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>
<%@ 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>
0
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:
Regards,
Ianko
Telerik
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
0
CDK
Top achievements
Rank 1
Rank 1
answered on 19 Dec 2014, 03:48 PM
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?
0
CDK
Top achievements
Rank 1
Rank 1
answered on 19 Dec 2014, 03:51 PM
Also, kendo 2014.1.318 requires jQuery 1.9.1.
0
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
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