New to Kendo UI for Angular? Start a free 30-day trial

Repositioning the Window Dynamically


ProductProgress® Kendo UI® for Angular Window


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


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

            title="Please provide additional data"
        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.

        public onEnd(){
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            if( < this.offset){
       = this.offset;
            if( > (windowHeight - this.height - this.offset)){
   = 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.

View Source
Change Theme:

In this article

Not finding the help you need?