Restrict Window Positioning
The example below demonstrates how to restrict the movement of a Kendo UI Window to a certain area.
<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>
See Also
- Window JavaScript API Reference
- How to Add Close Button inside Modal Windows
- How to Create Confirmation Dialog via Promises
- How to Initialize the Grid
- How to Post to Iframe
For more runnable examples on the Kendo UI Window, browse the How To documentation folder.