Restrict Window Positioning

The example below demonstrates how to restrict the movement of a Kendo UI Window to a certain area.

Example

    <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) {
            windowWrapper.css({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

Other articles and how-to examples on the Kendo UI Window:

• 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.