Restricting Window Position Example is a bit jumpy

[Johannes]

I am using a few Kendo Windows. I have finally got a bit of time to stop them from going outside of the browser screen so I thought that I would spend an hour getting this all set up and working nicely. I found the following article which I believe is meant to do what I need.

https://docs.telerik.com/kendo-ui/controls/layout/window/how-to/restrict-windows-position

I copied the code and worked it so that it was usable with my application, and I found that the widow would randomly jump to different sections of the screen as I was moving it, and sometimes off the screen completely. When I release the mouse, it seems to snap back to where my mouse is but this doesn't seem to be very restrictive.

Thinking it was me, I tested the example in the dojo on Chrome and IE, just to see if it was me, and I got the same result.

Have I misunderstood what the example is for? If not, could I get an example where it does not jump around on the screen?

 

Thanks,

Johannes

[Dimitar]

Hello Johannes,

Thank you for reporting this issue.

On the following Dojo example you can find a modified version of the example, where the Window is now correctly being reset to the original position if it is dragged outside of the specified boundaries (50 top or 50 left). The initial issue was related to the way that the drag event was attached. To fix it, the Window's dragend event is used instead:

$("#window").kendoWindow({
  width: 600,
  height: 300,
  position: {
    top: 0,
    left: 0
  },
  title: "Kendo UI Window",
  dragend: onWindowDrag
})

Also, as a small token of gratitude for helping us discover this issue, I have updated your Telerik Points.

Regards,
Dimitar
Progress Telerik

[Johannes]

Perfect! No more jumping.

However, is there any chance that you have any jQuery snippets laying around where the window is placed next to the edge of the browser that it left?

I have a bit of an idea where I get the existing location and dimensions of the window and the check it with the screen size, but if you had something that you knew already existed, I'd be very appreciative. :)

[Johannes]

Had a crack at it myself. Seems to work nicely. I am aware that it is pretty gross looking JS, but such is life.

Thought I would post my solution here just in case someone find sit useful, but also for some constructive criticism or issues that I may have overlooked to be addressed.

 

Thanks.

 

function onWindowDrag(e) {
    var windowWrapper = e.sender.wrapper,
        windowPosition = windowWrapper.offset(),
        shouldOverridePosition = false,
        newTop = windowPosition.top,
        newLeft = windowPosition.left,
        browserWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        browserHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

    //if window is maximized, don't allow drag
    if (e.sender.isMaximized()) {
        windowWrapper.css({ top: 0, left: 0 });
        return;
    }

    //test y-axis for window positioning.
    if (windowPosition.top < 0) {
        shouldOverridePosition = true;
        newTop = 0;
    }

    if (windowPosition.top + windowWrapper.height() > browserHeight) {
        shouldOverridePosition = true;
        newTop = browserHeight - windowWrapper.height();
    }

    //test x-axis for window positioning.
    if (windowPosition.left < 0) {
        shouldOverridePosition = true;
        newLeft = 0;
    }

    if (windowPosition.left + windowWrapper.width() > browserWidth) {
        shouldOverridePosition = true;
        newLeft = browserWidth - windowWrapper.width();
    }

    if (shouldOverridePosition) {
        windowWrapper.css({ top: newTop, left: newLeft });
    }
}

 

 

[Dimitar]

Hello Johannes,

Thank you for sharing your solution. I believe that it will be helpful for the rest of the community.

On the topic of restricting the Window to a specific position - we currently have an item in our backlog for implementing such behavior as a built-in feature of the widget(not scheduled). You can track the Release History page for the upcoming releases for additional information regarding the new features and enhancements.

Regards,
Dimitar
Progress Telerik