Editor by default is in read-only mode

[Reid]

First of all, someone should review the code in these forums so that if a user hits the backspace key when creating a new post the page does not navigate back!  So this is my second attempt to post this question because my first 95% complete post was vaporized when I hit the backspace key.  [arg!]

I am basing the code from this documentation:
http://docs.telerik.com/kendo-ui/controls/editors/editor/overview

I have a razor form with two editors on them and am formatting them as in the link above but they are showing up as read only.  Also the data from the model is not populating the control.  I tried using a standard input control as well with the same results.

Here is the code:

<p>
  @Html.TextAreaFor(m => m.Test.IntroText, new {style = "width:591px", id = "introtext"})
</p>

I tried removing the style attribute above with no change.

Here is the JavaScript:

$("#thankyoutext").kendoEditor({
    resizable: {
        content: true,
        toolbar: true,
        editable : true  <<-- Just tried that does not change anything
    },
    tools: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull",
        "insertUnorderedList",
        "insertOrderedList",
        "indent",
        "outdent",
        "createLink",
        "unlink",
        "insertImage",
        "insertFile",
        "subscript",
        "superscript",
        "createTable",
        "addRowAbove",
        "addRowBelow",
        "addColumnLeft",
        "addColumnRight",
        "deleteRow",
        "deleteColumn",
        "viewHtml",
        "formatting",
        "cleanFormatting",
        "fontName",
        "fontSize",
        "foreColor",
        "backColor",
        "print"
    ]

});

var editor = $("#thankyoutext").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", true).find("a").off("click.readonly");

 

Can someone help explain why it is greyed, read-only and does not contain data from the model?

 

Reid

 

[Marin Bratanov]

Hello Reid,

Your feedback on the backspace key has been forwarded to the team responsible for the forums front-end for review.

On the editor—my first suggestion is to use the MVC wrapper, as it simplifies the use of models: http://demos.telerik.com/aspnet-mvc/editor/index. My second suggestion is to ensure that there are no JavaScript errors on the page. The third one is to ensure that there is no additional validation applied in the model.

Here is an example taken from the said demo:

@(Html.Kendo().EditorFor(f => f.ProductName)
.Tools(tools => tools
          .Clear()
          .Bold().Italic().Underline().Strikethrough()
          .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
          .InsertUnorderedList().InsertOrderedList()
          .Outdent().Indent()
          .CreateLink().Unlink()
          .InsertImage()
          .InsertFile()
          .SubScript()
          .SuperScript()
          .TableEditing()
          .ViewHtml()
          .Formatting()
          .CleanFormatting()
          .FontName()
          .FontSize()
          .FontColor().BackColor()
          .Print()
      ))

where the key thing is to provide some data from the controller:

namespace Kendo.Mvc.Examples.Controllers
{
    public partial class EditorController : Controller
    {
        public ActionResult Index()
        {
            return View(new Kendo.Mvc.Examples.Models.ProductViewModel() { ProductName = "something from the data source" });
        }


    }
}

and I am attaching a short video with the expected result.

Regards,
Marin Bratanov
Telerik by Progress