Getting Kendo Editor to edit mode when a button is clicked

[RJ]

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!

[Misho]

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

 

 

[RJ]

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!