Editor by default is in read-only mode

2 posts, 1 answers
  1. Reid
    Reid avatar
    325 posts
    Member since:
    Oct 2008

    Posted 24 Jan Link to this post

    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




     

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3857 posts

    Posted 25 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top