Unable to set readonly Html.Kendo().EditorFor(model)

[swati]

Hi I have a disable or read only issue with Kendo editor in my c# MVC project :

@(Html.Kendo().EditorFor(m => m.Other_Areas)
                              .Name("Other_Areas")
                              .Encode(false)
                              .Tools(tools => tools
                                  .Clear()
                                  .Bold().Italic().Underline().Strikethrough().JustifyLeft().JustifyCenter().JustifyRight().JustifyFull().InsertUnorderedList().InsertOrderedList().Outdent().Indent()
                                  .CreateLink().Unlink().InsertImage().InsertFile().SubScript().SuperScript().TableEditing().ViewHtml()
                              )
                              .HtmlAttributes(new { @class = "form-control" }))

Currently I have  @Html.TextAreaFor(m => m.Other_Areas, new { @class = "form-control" }) and "clicking "View" link calls a function called

enableControls() { document.getElementById('Other_Areas').disabled = false;} this is just working fine. Now that I have replaced with Html.Kendo().EditorFor none of the following works:

            //var cteditor = $("#Other_Areas").data("kendoEditor"),
            //editorBody = $(cteditor.body);
            //editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false)
            //$($("#Other_Areas").data().kendoEditor.body).attr("contenteditable",false);
            //$("#Other_Areas").css("z-index", 2);
            //$('Other_Areas').contents().find("body").attr('contenteditable', false);
            //$('.k-editor-toolbar').hide();
            //$('#Other_Areas').attr('disabled', true);
            //$($("#Other_Areas").data().kendoEditor.body).attr("contenteditable", false);
            //$('#Other_Areas').data('kendoEditor').contentEditable(false);
            //$($('#Other_Areas').body).attr('contenteditable', false);

            //var cteditor = $("#Other_Areas").data().kendoEditor;
            //var editorBody = $(cteditor.body);
            //editorBody.attr("contenteditable", false);

            // $("#Other_Areas").data("kendoEditor").disable = true;

            //$('.k-editor textarea').each(function (idx, element) {
            //    $($(element).data("kendoEditor").body).attr("contenteditable", false);
            //});
                $(editor.body).attr('contenteditable',false);
 $('.k-editor textarea').each(function (idx, element) {
              $($(element).data("kendoEditor").body).attr("contenteditable", false);
            });

 

Currently I am using Kendo.mvc.dll version 2020.1.406.545

I tried several samples (http://dojo.telerik.com/oMaDAZ etc)  and it seems all are version specific. If I download as a seperate html/app it just works fine. Its not working in my application. I tried to add external references listed in example but my application throws multiple error stating that auto populate, date control etc are not working or Jquery not defined etc. May be because, I already have 2020 version kendo.mvc.dll locally and in addition if I add, the duplicate references leading to this error.

Please advise on how to completely disable the  Html.Kendo().EditorFor(m => m.Other_Areas) including the tools disabling like https://dojo.telerik.com/@NeliKondova/urIZAZAy 

 

Please advise. 

Many thanks,

Swati

[swati]

I also tried adding all in <span id="Otherareaseditor">html.kendo.EditFor() <span> and tried 

$('#Otherareaseditor:input').attr("disabled", true); but still its not disabled.

I see that the data is not saved it is just that the control on the form shows all tools and editable.

[swati]

Can anyone please help?

The model Other_Areas saves value and returns value on the form(I can see it)

On calling this function, it says Other_Areas  'undefined' why it cant pickup up value from model when form saves and retrieves correctly?

 

[swati]

Hello Admins, will you please let me know if there is any solution?

Thanks

[Martin]

Hello, Swati,

On this link you will find a How-To article on the matter. Could you please modify the attached solution to reproduce the issue you are experiencing? You can see that the content of the Editor cannot be edited.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[swati]

Thank you so much. This works perfect. I deleted all JS and other reference folder and reattached as per this sample. The editor body shows data now and it started working.

One last thing : when it's read-only is in full force, we want editor to be greyed out including the toolbar. I have multiple editors on the page, so I cant use the hide() option. Is there any alternatives to define or set as greyed editor and toolbox?

editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false)

something simillar to $("#other_areas").prop("classname")

#classname

{  edit.color: grey !Important

}

[swati]

The following code worked just fine. This might help others looking for a background color change on disable control.

var oeditor = $("#Other_Areas").data("kendoEditor");

oeditor.body.style.backgroundColor = "#E9ECEF";

[Martin]

Hello, Swati,

I am glad that you were able to achieve the requirement and thank you for sharing the code to do it.

Feel free to contact us whenever you have further questions.

Regards,
Martin
Progress Telerik