Hi,
I'm using Telerik Extensions for ASP .NET MVC and I want to update to a newer version but only Kendo UI is available. I fine it good and try to migrate my application to Kendo. I've installed the Trial and create a new project with Kendo and it works fine.
So, I go to my old project and create a new view and use the Kendo components, add the reference of kendo, add the scripts and contents, add the links in my sitelayout but it not works with my Telerik Application. I converted my View in a partial View, copy the links and it works fine, but when I use my SiteLayout it doesn't works. I get an error Uncaught TypeError: Object [object Object] has no method 'kendoDatePicker' if I use a DatePicker and Uncaught TypeError: Object [object Object] has no method 'kendoGrid' if I use a Grid. So, the problem seems to be in the jquery between Telerik MVC extension and Kendo UI.
Is it possible to use both, telerik mvc extensions and kendo UI or I've to migrate all the application? What can I do to resolve this problem?
This is my Site layout
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/kendo/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.all.min.js")"></script>
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.black.css").Combined(true).Compress(true)))
@Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.sunset.css"))
@RenderSection("HeadContent", required:false)
@RenderSection("headerjavascript", required: false)
@helper selected(string c, string culture)
{
if (c == culture)
{
@:checked="checked"
}
}
@{
var culture = System.Threading.Thread.CurrentThread.CurrentUICulture.Name.ToLowerInvariant();
}
<script type="text/javascript">
$(function () {
$("input[type='radio']").click(function () {
$(this).parents("form").submit(); // apply by posting form
});
// highlight selected language
$("input[type='radio']:checked").next().css("font-weight", "bold");
});
</script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title" style="float:left;width:50%;">
<h1>@BS.Admin.Resources.Menu.TituloAplicacion</h1>
</div>
@using (Html.BeginForm("SetCulture", "Home"))
{
<fieldset>
<legend>Please choose your language</legend>
<input name="culture" id="en-us" value="en-us" type="radio" @selected("en-us", culture) /> <label for="en-us">English</label> <br />
<input name="culture" id="es-cl" value="es-cl" type="radio" @selected("es-cl", culture) /> <label for="es-cl">Espa�ol</label> <br />
</fieldset>
}
<div id="logon-box" align="right" style="padding:15px;height:60px;">
@{Html.RenderAction("LogOnBox");}
</div>
@(Html.Telerik().Menu().HtmlAttributes(new { style = "horizontal-align: left;" })
.Name("menu")
.Items(menu => {
menu.Add().Text(@BS.Admin.Resources.Menu.Home).Action("Index", "Home", new { area = "" });
menu.Add().Text(@BS.Admin.Resources.Menu.Consultas).Action("Index", "Home", new { area = "" }).Items(subitem =>
{
subitem.Add().Text(@BS.Admin.Resources.Menu.EnvioEmails).Action("ConsultasEnvioEmail", "Reportes", new { area = "Jugador" });
subitem.Add().Text(@BS.Admin.Resources.Menu.ReenviarActivacionCuenta).Action("ReenvioEmailActivacion", "Messages", new { area = "Jugador" });
});
}))
</div>
<div id="main">
@RenderBody()
<div id="footer">
</div>
</div>
</div>
@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))</body>
</html>
this is my viewpage
@using Kendo.Mvc.UI
@model BS.Admin.WebUIMVC.Areas.Financial.Models.ParametrosModel
@{
ViewBag.Title = "Ver Operaciones";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>VerOperaciones</h2>
@(Html.Kendo().DatePicker().Name("Test"))
and this is the part from where I get the error in Console Developer Tools from Google Chrome
I'm using Telerik Extensions for ASP .NET MVC and I want to update to a newer version but only Kendo UI is available. I fine it good and try to migrate my application to Kendo. I've installed the Trial and create a new project with Kendo and it works fine.
So, I go to my old project and create a new view and use the Kendo components, add the reference of kendo, add the scripts and contents, add the links in my sitelayout but it not works with my Telerik Application. I converted my View in a partial View, copy the links and it works fine, but when I use my SiteLayout it doesn't works. I get an error Uncaught TypeError: Object [object Object] has no method 'kendoDatePicker' if I use a DatePicker and Uncaught TypeError: Object [object Object] has no method 'kendoGrid' if I use a Grid. So, the problem seems to be in the jquery between Telerik MVC extension and Kendo UI.
Is it possible to use both, telerik mvc extensions and kendo UI or I've to migrate all the application? What can I do to resolve this problem?
This is my Site layout
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/kendo/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.all.min.js")"></script>
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.black.css").Combined(true).Compress(true)))
@Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.sunset.css"))
@RenderSection("HeadContent", required:false)
@RenderSection("headerjavascript", required: false)
@helper selected(string c, string culture)
{
if (c == culture)
{
@:checked="checked"
}
}
@{
var culture = System.Threading.Thread.CurrentThread.CurrentUICulture.Name.ToLowerInvariant();
}
<script type="text/javascript">
$(function () {
$("input[type='radio']").click(function () {
$(this).parents("form").submit(); // apply by posting form
});
// highlight selected language
$("input[type='radio']:checked").next().css("font-weight", "bold");
});
</script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title" style="float:left;width:50%;">
<h1>@BS.Admin.Resources.Menu.TituloAplicacion</h1>
</div>
@using (Html.BeginForm("SetCulture", "Home"))
{
<fieldset>
<legend>Please choose your language</legend>
<input name="culture" id="en-us" value="en-us" type="radio" @selected("en-us", culture) /> <label for="en-us">English</label> <br />
<input name="culture" id="es-cl" value="es-cl" type="radio" @selected("es-cl", culture) /> <label for="es-cl">Espa�ol</label> <br />
</fieldset>
}
<div id="logon-box" align="right" style="padding:15px;height:60px;">
@{Html.RenderAction("LogOnBox");}
</div>
@(Html.Telerik().Menu().HtmlAttributes(new { style = "horizontal-align: left;" })
.Name("menu")
.Items(menu => {
menu.Add().Text(@BS.Admin.Resources.Menu.Home).Action("Index", "Home", new { area = "" });
menu.Add().Text(@BS.Admin.Resources.Menu.Consultas).Action("Index", "Home", new { area = "" }).Items(subitem =>
{
subitem.Add().Text(@BS.Admin.Resources.Menu.EnvioEmails).Action("ConsultasEnvioEmail", "Reportes", new { area = "Jugador" });
subitem.Add().Text(@BS.Admin.Resources.Menu.ReenviarActivacionCuenta).Action("ReenvioEmailActivacion", "Messages", new { area = "Jugador" });
});
}))
</div>
<div id="main">
@RenderBody()
<div id="footer">
</div>
</div>
</div>
@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))</body>
</html>
this is my viewpage
@using Kendo.Mvc.UI
@model BS.Admin.WebUIMVC.Areas.Financial.Models.ParametrosModel
@{
ViewBag.Title = "Ver Operaciones";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>VerOperaciones</h2>
@(Html.Kendo().DatePicker().Name("Test"))
and this is the part from where I get the error in Console Developer Tools from Google Chrome
<input class="k-input" id="Test" name="Test" type="date" /><script>
jQuery(function(){jQuery("#Prueba").kendoDatePicker({format:"dd-MM-yyyy",min:new Date(1900,0,1,0,0,0,0),max:new Date(2099,11,31,0,0,0,0)});});
Uncaught TypeError: Object [object Object] has no method 'kendoDatePicker'
</script>
2 Answers, 1 is accepted
0
chicken
Top achievements
Rank 1
Rank 1
answered on 11 Dec 2012, 06:22 PM
I am getting the same error after (I think) removing all references to the previous version.
Has anyone solved this issue?
Has anyone solved this issue?
0
Hi,
Daniel
the Telerik team
The problem you experience is covered in this documentation topic.
Kind regards,Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!