How to select editor in Jquery when using Html.Kendo().EditorFor

Question

I'm using the Telerik Kendo UI editor for a field that can be posted to the server.

@( Html.Kendo().EditorFor(model => model.TickerContent)
                           .Name("TickerContent")
                           .Encode(true)
                           .HtmlAttributes(new { style = "width:100%;height:440px" }))

On the same page as the form I have a list of items that I want to be able to edit, so I need to set the value of the editor. The demo code uses the following code to get and set the value of the editor:

<script>
    $(document).ready(function () {
        var editor = $("#Editor").data("kendoEditor");

        var setValue = function () {
            editor.value($("#value").val());
        };

        $("#get").click(function () {
            alert(editor.value());
        });

        $("#set").click(setValue);
    });
</script>

The value of variable editor is always undefined. My question is how can I get and set the editor value?

I tried var editor = $("#TickerContent").data("kendoEditor"); but the editor is still undefined.

Answer 1

Same issue here, here is what I did:

For the html

@Html.TextAreaFor(model => model.TickerContent);

For the JS

    <script>
         $(function(){
            $("#TickerContent").kendoEditor().data("kendoEditor");
            var editor  = $("#TickerContent").data("kendoEditor");
         })
    </script>

then the "editor" is not undefined

Answer 2

For setting the editor value you can set like this:

$("#Editor").data("kendoEditor").value($("#value").val());

Answer 3

I think you need to remove the .Name("TickerContent"). I had the same issue. Why, I don't know.