Disable editor from parent div?

7 posts, 1 answers
  1. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 08 Apr 2014 Link to this post

    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?






  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Apr 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 09 Apr 2014 in reply to Stephen Link to this post

    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?
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Apr 2014 Link to this post

    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.

     
  6. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 09 Apr 2014 in reply to Dimo Link to this post

    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?
  7. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Apr 2014 Link to this post

    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.

     
  8. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 11 Apr 2014 in reply to Dimo Link to this post

    Great thank you!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready