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
-
Use a two-way binding for the
left
andtop
properties of the Window.... <kendo-window *ngIf="opened" [(left)]="left" [(top)]="top" (dragEnd)="onEnd()" title="Please provide additional data" (close)="close()" [width]="width" [height]="height"> ...
... 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; ...
-
Handle the
dragEnd
event and calculate the currentleft
andtop
properties of the Window.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.