New to Kendo UI for jQuery? Download free 30-day trial

Missing Content when Drag Dropping Kendo Editor

Environment

Product Progress® Kendo UI® Editor for jQuery

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