Cannot Get reference to existing Editor instance.

5 posts, 1 answers
  1. John
    John avatar
    3 posts
    Member since:
    Mar 2014

    Posted 03 Oct Link to this post

    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>

  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 03 Oct Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. John
    John avatar
    3 posts
    Member since:
    Mar 2014

    Posted 03 Oct in reply to Rumen Link to this post

    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.

     

  5. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 04 Oct Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. John
    John avatar
    3 posts
    Member since:
    Mar 2014

    Posted 05 Oct Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready