New to Kendo UI for jQuery? Download free 30-day trial

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>

See Also

In this article