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

Getting Kendo Editor to edit mode when a button is clicked

2 Answers 407 Views
Editor
This is a migrated thread and some comments may be shown as answers.
RJ
Top achievements
Rank 1
RJ asked on 11 Apr 2016, 06:36 PM

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 Answers, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 13 Apr 2016, 10:16 AM
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!
 
0
RJ
Top achievements
Rank 1
answered on 18 Apr 2016, 05:46 PM
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!
Tags
Editor
Asked by
RJ
Top achievements
Rank 1
Answers by
Misho
Telerik team
RJ
Top achievements
Rank 1
Share this question
or