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

Editor by default is in read-only mode

1 Answer 156 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Reid
Top achievements
Rank 2
Reid asked on 24 Jan 2017, 03:16 PM

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




 

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 25 Jan 2017, 11:29 AM

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.
Tags
Editor
Asked by
Reid
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Share this question
or