For some reason my Telerik MVC Editor() is not working. Can anyone spot what I´m doing wrong?
I´m using MVC4 with Razor view engine and Telerik version 2012.1.214
_Layout.cshtml includes this:
@using Smekklegt.Models
@using Telerik.Web.Mvc.UI
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="is" xml:lang="is">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/AjaxLogin.js")" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<!-- Skrár frá template-->
<link href="@Url.Content("~/Content/rikona/styles/galleriffic.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/rikona/style.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/rikona/js/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/rikona/js/jquery.opacityrollover.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/rikona/js/jquery.galleriffic.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/rikona/js/gallery-settings.js")" type="text/javascript"></script>
<!--[if IE 6]>
<script src="../../Content/rikona/js/ie6-transparency.js"></script>
<script>
DD_belatedPNG.fix('#header .logo img, .subtitle img, .slideshow-container, .navigation-container #thumbs .thumbs li .thumb img, .navigation a.next, .footer-line, #sidebar .author-photo, .line, .commentlist .comment-reply-link, #contact-page #contact .submit');
</script>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie8.css" />
<![endif]-->
@(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.common.css")
.Add("telerik.simple.css")
.Combined(true)
.Compress(true))
)
</head>
<body>
<div id="wrap">
<div id="header">
<section id="login" style="float: right;">
@Html.Partial("_LogOnPartial")
</section>
<section style="float: left;">
<ul>
<li>@Html.ActionLink("Flokkar", "Index", "Category")</li>
<li>@Html.ActionLink("Vörur", "Index", "Product")</li>
</ul>
</section>
<div class="logo">
<img src="../../Content/rikona/images/smekklegt_banner2.jpg" alt="logo" width="400px;" />
</div>
<div id="nav">
<ul id="nav-pages">
<li>@Html.ActionLink("Forsíða", "Index", "Home")<span>|</span></li>
@foreach (Category category in (IEnumerable<Category>)ViewData["Categories"])
{
<li>@Html.ActionLink(category.Name, "FindProductsByCategory", "Product", new { catId = category.Id }, null)<span>|</span></li>
}
<li>@Html.ActionLink("smekklegt.is", "Contact", "Home")</li>
</ul>
</div>
</div>
<div id="frontpage-content">
<div id="container">
@RenderSection("featured", false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
</div>
<div id="footer" style="margin-top: 15px;">
<div class="footer-line">
</div>
<p>
© @DateTime.Now.Year Smekklegt ehf</p>
<div class="float-right">
<ul id="social">
<li><a href="https://www.facebook.com/sersaumadir.smekkir" target="_blank" class="facebook">Facebook</a></li>
</ul>
</div>
</div>
@Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g => g.Combined(true).Compress(true))
</div>
Create.cshtml includes this:
@using Telerik.Web.Mvc.UI
@model Smekklegt.Controllers.ProductFormViewModel
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Product</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Product.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Product.Name)
@Html.ValidationMessageFor(model => model.Product.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Product.FK_Category)
</div>
<div class="editor-field">
@*@Html.EditorFor(model => model.Product.FK_Category)*@
@Html.DropDownListFor(d => d.Categories, new SelectList(Model.Categories, "Id", "Name"))
@Html.ValidationMessageFor(model => model.Product.FK_Category)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Product.Description)
</div>
<div>
@{ Html.Telerik().EditorFor(m => m.Product.Description)
.Name("ProductCreateEditor")
.Encode(false)
.HtmlAttributes(new { style = "width: 500px;" })
.Tools(t => t.Clear()
.Bold().Italic().Underline().Separator().JustifyCenter().JustifyLeft().JustifyRight().JustifyFull())
//.Value((string)ViewData["ProductDescription"])
.Render(); }
</div>
<p>
<input type="submit" value="Stofna" />
<input type="button" value="Til baka" onclick="javascript:history.go(-1)"/>
</p>
</fieldset>
}
The problem I have is that every time I load my page the telerik editor appears but I can not write into the text area. (It looks like it were disabled) 🙁
Update
Remove this line from your Layout
You only need one version of Jquery, they are conflicting is my best bet.
Everything else looks right
Remove this line
You are using
EditorForwhich pulls the value out of the model. So you only need to set the value in one place. You were trying to set it in two places, in theEditorForandValue.If you were using just
EditornotEditorForyou can useValueSo choose to do
EditorForlike so:Or
EditorAs John also states make sure the placement of your Telerik script is in the right place. It must be in the _Layout page at the bottom like so;