Restrict the Positioning of the Window
Environment
| Product | Progress® Kendo UI® Window for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I restrict the movement of a Kendo UI Window to a certain area?
Solution
The example below demonstrates how to achieve the desired scenario.
<div id="window">
Window content
</div>
<script>
$(function() {
function onWindowDrag (e) {
var windowWrapper = winObject.wrapper,
windowPosition = windowWrapper.offset(),
shouldOverridePosition = false,
newTop = windowPosition.top,
newLeft = windowPosition.left;
if (windowPosition.top > 50 || windowPosition.top < 0) {
shouldOverridePosition = true;
newTop = 50;
}
if (windowPosition.left > 50 || windowPosition.left < 0) {
shouldOverridePosition = true;
newLeft = 50;
}
if (shouldOverridePosition) {
winObject.setOptions({
position: {
top: newTop,
left: newLeft
}
});
}
}
var winObject = $("#window").kendoWindow({
width: 600,
height: 300,
position: {
top: 0,
left: 0
},
title: "Kendo UI Window",
dragend: onWindowDrag
}).data("kendoWindow");
});
</script>