Search code examples
jquerykendo-uitelerikkendo-editor

How to Drag text from Kendo ListView and Drop it in Kendo Editor?


I'm trying to implement a simple editor where items will be dragged from Kendo ListView and dropped in Kendo Editor. However, the drop function is not working as expected. I'm using KendoDropTarget, which works only in case of a simple textarea or a contentEditable element, but not with the Editor.

http://plnkr.co/edit/tSk2ahaarIodFYY9azNS

I spent hours searching for a solution, but I could only find one in Telerik forums which proposes to use an overlay on top of the editor. http://www.telerik.com/forums/kendoeditor-droptarget

However, I do not want to use the overlay on top of the Kendo editor iframe. Is there a way to access the body within the iframe (which is contentEditable) and drop draggable value within it?

If overlaying is the only solution, how to efficiently implement the drag and drop?

I would greatly appreciate it if anybody can kindly help me.


Solution

  • Overlaying the iframe is required because the iframe itself will capture the mouse events (it is a separate document). If you don't want to implement overlays you can create the editor from a contentEditable element as shown in this demo: http://demos.telerik.com/kendo-ui/editor/inline-editing