Missing Content when Drag Dropping Kendo Editor

Environment

Product Kendo UI Editor

Description

Editor within Sortable loses it's content when dragged.

Solution

Because of the embedded <iframe> when changing the position of the Editor widget in the DOM, the widget will need its refresh() method to be called to properly display its content again. Here you could find a small sample demonstrating that.

    <ul id="sortable">
        <li>Editor <textarea id="editor1" rows="10" cols="30">Editor content</textarea></li>
        <li>Textarea <textarea id="editor2" rows="10" cols="30"></textarea></li>
        <li>DropDownList <input id="ddl"/></li>
        <li>iframe <span id="test"></span></li>
    </ul>

    <script>
        $("#sortable").kendoSortable({
            ignore: "table, textarea, input",
            change: function(e) {
                var editor = $("#editor1").getKendoEditor();

                if (!!editor) {
                    editor.refresh();
                }
            }
        });

        $("#editor1").kendoEditor()

        $("#ddl").kendoDropDownList({
            dataSource: ["A", "B"]
        })

        var iframe = document.createElement('iframe');
        document.getElementById('test').appendChild(iframe);
        iframe.contentWindow.document.write('<div>foo</div>');
    </script>

See Also

In this article
Not finding the help you need? Improve this article