How to make kendo editor draggable

7 posts, 1 answers
  1. Quotient
    Quotient avatar
    15 posts
    Member since:
    Sep 2013

    Posted 28 Feb Link to this post

    We have a UI, where text and image components can be added and edited within a div, and the final layout should be saved on the server. 

    I can drag an image using kendoDraggable and handle doubleclick on the image area to make image updates.

    When a text component is added, its content is editable via inline kendo editor. But since editor captures clicks and mouse events, there seem to be no easy way to make inline editor draggable to move it around the parent div. Any suggestions are highly appreciated. 

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 01 Mar Link to this post

    Hello,

    There are couple of possible approaches to achieve the desired behavior:

    1) Wrap the Kendo UI Editor in another DOM element, making sure there is enough space between the borders of the wrapper and the Editor, so that the wrapper can be used as a "handle".

    2) Put the Editor inside of a Kendo UI Window, as demonstrated in this how-to article from our documentation:

    http://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/inline-editor-inside-window#use-inline-editor-inside-windows

    Please note that the second approach requires some workarounds to make the Editor's toolbar (which resides in a Kendo UI Window instance) work well together with the Kendo UI Window that holds the inline editor. The workarounds are included in the how-to.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Quotient
    Quotient avatar
    15 posts
    Member since:
    Sep 2013

    Posted 01 Mar Link to this post

    Thank you Dimiter! I've been trying the same as you suggested in 1).

    Please see https://plnkr.co/edit/eDUXjaJDGbnk5YKp9yBv?p=preview

    However I can not make k-container work as in http://dojo.telerik.com/uDukA, and most important, I can not editor to get focus unless I right-click or ctrl-click on some text in it. 

    Your help is very much appreciated!

  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 03 Mar Link to this post

    Hi,

    you should use the ignore configuration option of the draggable - like this.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Quotient
    Quotient avatar
    15 posts
    Member since:
    Sep 2013

    Posted 03 Mar in reply to Petyo Link to this post

    Petyo, you included the link to my original plunker, which is not updated. Would you please show how to use "k-ignore" pointing to a child div. Can I put a jquery selector string on the scope into the directive controller? Documentation is not helpful there.

    Also, I can still not make k-container work. 

  7. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 04 Mar Link to this post

    Hello,

    sorry. my plunker skills betrayed me here. Please check the version I meant to post. There is one particular problem with the container, though. It needs inline styles for the draggable to work as expected. We have an open bug for that. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Quotient
    Quotient avatar
    15 posts
    Member since:
    Sep 2013

    Posted 05 Mar in reply to Petyo Link to this post

    Perfect! Petyo, thanks a lot!!!
Back to Top
Kendo UI is VS 2017 Ready