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

Disable editor from parent div?

6 Answers 189 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 08 Apr 2014, 09:06 PM
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?






6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Apr 2014, 09:04 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 09 Apr 2014, 01:44 PM
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?
0
Dimo
Telerik team
answered on 09 Apr 2014, 03:17 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 09 Apr 2014, 07:00 PM
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?
0
Accepted
Dimo
Telerik team
answered on 10 Apr 2014, 06:48 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 11 Apr 2014, 01:58 PM
Great thank you!
Tags
Editor
Asked by
Stephen
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Stephen
Top achievements
Rank 1
Share this question
or