Repositioning the Window Dynamically

Environment

Product

Progress® Kendo UI® for Angular Window

Description

How can I reposition the Kendo UI for Angular Window after the user dragged it outside the allowed window boundaries?

Solution

1. Use a two-way binding for the left and top properties of the Window.

   html

       ...
       <kendo-window
           *ngIf="opened"
           [(left)]="left"
           [(top)]="top"
           (dragEnd)="onEnd()"
           title="Please provide additional data"
           (close)="close()"
           [width]="width"
           [height]="height">
       ...

   ts

       ...
       export class AppComponent {
           public offset = 50;
           public left = this.offset;
           public top = this.offset;
           public width = 400;
           public height = 350;
           public opened = true;
           public dataSaved = false;
       ...

2. Handle the dragEnd event and calculate the current left and top properties of the Window.

   ts

       public onEnd(){
           const windowWidth = window.innerWidth;
           const windowHeight = window.innerHeight;
   
           if(this.top < this.offset){
               this.top = this.offset;
           }
   
           if(this.top > (windowHeight - this.height - this.offset)){
           this.top = this.offset;
           }
   
           if(this.left < this.offset){
               this.left = this.offset;
           }
   
           if(this.left > (windowWidth - this.width - this.offset)){
               this.left = this.offset;
           }
       }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Window