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>