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

Conflict Migrating Telerik MVC 3 Application to Kendo UI

2 Answers 295 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Cesar
Top achievements
Rank 1
Cesar asked on 13 Sep 2012, 04:12 PM
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

<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

Sort by
0
chicken
Top achievements
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?
0
Daniel
Telerik team
answered on 14 Dec 2012, 11:26 AM
Hi,

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!
Tags
General Discussions
Asked by
Cesar
Top achievements
Rank 1
Answers by
chicken
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or