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

Kendo Version Issue

6 Answers 135 Views

Map

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

6 Answers, 1 is accepted

answered on 12 Dec 2014, 11:30 AM

RadMap-and-KendoMap.zip

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

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>

answered on 17 Dec 2014, 11:27 AM

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"

</telerik:MapLayer>

</LayersCollection>

</telerik:RadMap>

</div>

<script type="text/javascript">

$("#txtDatePicker").kendoDatePicker({

start: "year",

depth: "year",

format: "MM/dd/YYYY"

});

</script>

Regards,
Ianko
Telerik