Disable editor from parent div?

[Stephen]

I am trying to disable an entire form or all form fields within a parent div.  This works by disabling the div with the following jquery:

$('#timerequest-details').attr('disabled', 'disabled');

except for the Kendo Editor controls within that div.  I have seen posts that show to use the following jquery to disable the content of an Editor:

$($('#editorName').data().kendoEditor.body).attr('contenteditable',false)

but I would like to do this from the parent div or form so that I don't have to do it for each form field.  More specifically, some of my form fields are loaded through various partial views and I don't want to have to check if they should be disabled and set them as disabled on each partial view.

Is this possible to do?

[Dimo]

Hello Stephen,

The Editor is not a standard form field that can be disabled via the "disabled" HTML attribute. The widget's editability depends on the "contenteditable" HTML attribute, that's why that needs to be toggled to "false".

By the way, setting a "disabled" attribute to a "div" is not standard-compliant and I can't even make this work in any modern browser (i.e. the children form fields of a disabled div are still editable on my side, eventhough they may be greyed out).

http://jsfiddle.net/4eBU9/

Regards,
Dimo
Telerik

 

 

[Stephen]

Oh yes I see that now.  So is there anyway to do this with jquery from the top level down without having to individually set each control to disabled?

[Dimo]

Hi Stephen,

Assuming that you are using inline Editors, you can use:

$(".k-editor-inline").attr("contenteditable", false);

For classic iframe Editors, use:

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

Regards,
Dimo
Telerik

 

 

[Stephen]

Ok that is sort of working.  It doesn't give me the cursor in the editor but I can still highlight the text and hit the delete button and also use the tool bar to change formatting....is there a way to prevent this?

[Dimo]

Hello Stephen,

You can hide the Editor tools with

$(".k-editor textarea").each(function(idx, element) {
   var editor = $(element).data("kendoEditor");
   $(editor.body).attr("contenteditable", false);
   editor.wrapper.find(".k-editor-toolbar").css("visibility", "hidden");
});

However, keyboard commands like Ctrl+B will still work. You can disable text selection with

$(".k-editor textarea").each(function (idx, element) {
    var editor = $(element).data("kendoEditor");
    $(editor.body).attr("contenteditable", false).css("user-select", "none");
    editor.wrapper.find(".k-editor-toolbar").css("visibility", "hidden");
});

However, this may turn out to be frustrating for end users. A possible alternative option is to destroy the Editors.

$(".k-editor textarea").each(function(idx, element) {
   var editor = $(element).data("kendoEditor");
   $(editor.body).attr("contenteditable", false);
   editor.wrapper.find(".k-editor-toolbar").css("visibility", "hidden");
   editor.destroy();
});

If needed, you can recreate the Editors like this:

$(".k-editor textarea").each(function(idx, element) {
   var textarea = $(element);
   var wrapper = textarea.closest(".k-editor");
   // get decoded textarea value
   var value = $("<div></div>").html(textarea.val()).text();
   textarea.show().insertBefore(wrapper).val(value);
   wrapper.remove();
   textarea.kendoEditor();
});

Regards,
Dimo
Telerik

 

 

[Stephen]

Great thank you!