Need help with draggable containment property

2 posts, 0 answers
  1. David
    David avatar
    2 posts
    Member since:
    Dec 2019

    Posted 17 Dec 2019 Link to this post

    I've got a navigation menu , and under it a workspace. Any button pressed in the menu will open  a kendo window in the workspace. I don't want the windows to cover the menu and thus placed the windows with a contain property to workspace div. However I want the windows to be placed anywhere under the menu. I want a scroll bar to appear when the window is being dragged outside of the workspace. I have overflow: scroll set in the workspace div but the windows cannot be dragged beyond the workspace. 

    I've placed how my window is made.


      function onClose(e) {<br>            if (confirm("Are you sure? All form data will be lost.") == false)<br>                e.preventDefault();<br>            else {<br><br>      "kendoWindow").destroy();<br>                secWindow.remove();<br>            }<br>        }<br>        var formName = + "form.aspx"<br>        secWindow.kendoWindow({<br>            width: "600px",<br>            content: formName,<br>            title: windowTitle,<br>            appendto: '#content' ,<br>            draggable: {<br>                containment: '#content'<br>            },<br>            visible: false,<br>            actions: [<br>                "Pin",<br>                "Refresh",<br>                "Minimize",<br>                "Maximize",<br>                "Close"<br>            ],<br>            close: onClose<br>        }).data("kendoWindow");<br>"kendoWindow").center().open();<br>        setInterval(function (e) {"kendoWindow").refresh(formName) }, 60000);
  2. Ivan Danchev
    Ivan Danchev avatar
    2148 posts

    Posted 19 Dec 2019 Link to this post

    Hello David,

    The draggable.containment option appends the Menu to a container element, thus preventing it from being dragged over elements outside of this container.

    Consider changing the layout so that the elements you want to drag the Window over are nested within the container you are appending it to.

    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top