Getting Kendo Editor to edit mode when a button is clicked

3 posts, 0 answers
  1. RJ
    RJ avatar
    4 posts
    Member since:
    Mar 2016

    Posted 11 Apr Link to this post

    I have a Kendo Editor defined as below:

          @(Html.Kendo().Editor()
          .Name("RestrictionsEditor")
          .Tag("div")
          .Tools(tools => tools
                .Clear()
                .Bold().Italic().Underline().Strikethrough()
                .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                .CreateLink().Unlink()
                .InsertImage()
                .TableEditing()
                .FontColor().BackColor()
          )
          .Value(@<text><p>This is readonly editor initially and only gets in edit mode after button is clicked</p></text>))
            

    Below is how I am making the Editor as readonly:

               <script type="text/javascript">
                    $(function () {
                        var editor = $("#RestrictionsEditor").data("kendoEditor"),
                        editorBody = $(editor.body);

                        // make readonly
                        editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);
                    })
                       
                </script>

     

    I want to get editor in 'Edit' mode only when a button is clicked. Below is how I am defining my button:

                             <button class="btn-sm" id="edit">Edit</button>

     

    I have defined my button just before initializing Kendo Editor.

     

    And below is how I am trying to get the editor to edit mode:

             <script type="text/javascript">
                    $("#edit .btn").click(function () {

                    var editor = $("#RestrictionsEditor").data("kendoEditor"),
                    editorBody = $(editor.body);
                    
                    editorBody.attr("contenteditable", true).find("a").off("click.readonly");
                    })
                </script>

     

    Now, when I run application my editor is in read only and when I click 'Edit' button, editor doesn't gets in edit mode and instead as soon as I click button, I m directed to the original page. Forgot to mention, my editor is inside a tab, which is inside of a modal.

     

    Can you tell  me where I am doing wrong and how can I acheive th

     

    Thanks!

  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 13 Apr Link to this post

    Hi,

    The code you have provided seems to be working as expected on my end with small modifications. The editor content area is initially readonly. Once pressing the 'Edit' button the editor gets in edit mode and the content area becomes editable. Here is a code sample that is showing this behavior:
    http://dojo.telerik.com/@parvanov/oSOSa/7
    If you are still experiencing the issue, could you please provide a sample of your custom configuration or modify the dojo example, including the tab inside the modal, so the problematic behavior could be observed?

    Best Regards,
    Misho
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. RJ
    RJ avatar
    4 posts
    Member since:
    Mar 2016

    Posted 18 Apr in reply to Misho Link to this post

    Thank You Misho. By default edit button was taking type = submit, because of which it was loading the initial page. Adding type = button to my button definition, solved the problem. Thanks!
Back to Top