Cannot Get reference to existing Editor instance.

[John]

Hello,

I load the following via ajax and the shown  javascript Alert fires proving jquery and javascript are working.  Editor Events work but I need to clear the editor contents programmatically.   At the console, well after all loaded and completed, $("#editor") is undefined.  I am looking at this documentation.  http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/editor/overview#existing-instances

 

 <div id="editorWrapper">
            @(Html.Kendo().Editor()
            .Name("editor")
            .HtmlAttributes(new { @class = "desc-editor", name = "Description", id = "Description" })
            .Resizable(resizable => resizable.Content(true).Toolbar(true))
            .StyleSheets(css => css
            .Add(Url.Content("~/Content/editorStyles.css"))
            )
            .Tools(tools => tools
            .Clear()
            .Bold().Italic().Underline().Strikethrough()
            ).Events(events => events
            .Change("change")
            .Execute("execute")
            .Select("select")
            .Paste("paste")
            ).Value(@<text> </text>)
            )

            <script>
            $(function () {
                alert($(".input-field").length);

                //Notice that the Name() of the Editor is used to get its client-side instance.
                var editor = $("#editor").data("kendoEditor");
            });
            </script>

        </div>

[Rumen]

Hi there,

 

var editor = $("#editor").data("kendoEditor");

is the right way to get access to the client object of the Kendo Editor as shown in the following video: http://screencast.com/t/YGq9CuLsR.

Best regards,
Rumen
Telerik by Progress

[John]

Thanks much Rumen, but as shown I am using 

var editor = $("#editor").data("kendoEditor");

I grabbed a free screen recorder and did this https://youtu.be/SGL6is1bPNw .  But the quality kind of sucks. 

What it tries to show is, I load (via Ajax) the the Editor, with the .name("editor") and it responds to events and work in most ways but,  the value of  $("#editor") is undefined, it does not resolve.    So this: ' $("#editor").data("kendoEditor") ' is even more unresolved and setting it to a variable is of course no good.  The documented code does not work, at least for me.  Is it ajax?  Do I need to call a method to refresh the editor on the client?  The reason I want to use the MVC version was to avoid that kind of thing.

 

[Rumen]

Hi,

You've wrote that you are using AJAX. Is it possible that the Id of the editor is changed because of the AJAX? My suggestion is to inspect with the browser's DOM inspector what's the name of the editor once it is loaded on the page and set the proper name:

var editor = $("#>>>here<<<").data("kendoEditor");

Another approach is to get the editor client object via its class name:

.HtmlAttributes(new { @class = "desc-editor", name = "Description", id = "Description" })

class = "desc-editor"

If you are unable to solve the issue, can you provide your page with the editor for examination?

Best regards,
Rumen
Telerik by Progress

[John]

Hi Rumen,

You got me on track.  Thanks.   For others looking at this....

Previously, I had spelunked the dom and found  using  $(".desc-editor")  this   [textarea#Description.desc-editor.k-content.k-raw-content] .  And could see the textarea tag.  My mistake was I thought I had to get a hold of the wrapper of the iframe / body which I could tell was holding the "text" of the editor since that was what I wanted to clear.  Also $("#Description") works.  The MVC htmlhelper  .Name("editor")  method did not create a editor element named "editor".  The docs kinda imply that.  

Cheers.