Dynamically re-position Kendo Window for Angular

[Jyothi]

Hi, any one know how to dynamically re-position the Kendo-window in Angular 6?

When I move the Kendo-window it goes below the navigation bar. I would like to prevent that.

 

Regards.

[Svet]

Hi Jyothi,

We can handle the (dragEnd) event of the Window and check its left and top positions. If the positions do not meet a certain condition we can change them programmatically. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-ebheqx?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Jyothi]

Hi Svetlin,

That was really helpful.  Thank you.

Regards,

Jyothi

[Rajesh]

Hi Svetlin,

The window is re positioned to the defined offset on dragEnd. This looks good.

Instead of dragEnd, i tried to check the left and top positions while the window is being dragged itself. So that i can restrict the window moving within the container (Just to avoid the window going beyond the container and re positioning on dragEnd).

For that i used leftChange/topChange events instead of dragEnd with same logic given in the below link

https://stackblitz.com/edit/angular-ebheqx?file=app/app.component.ts

top property works fine, but the left property is not honoring the reset value and still going beyond the container event after resetting the value.

I used the same logic as in dragEnd of your example but with leftChange/topChange events. Any issue with left property ?

My sample code below.

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

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

onwindowPositionChange()
{
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const positionTop = windowHeight - this.height - this.offset;
const positionRight = windowWidth - this.width - this.offset

if(this.top < this.offset){
this.top = this.offset;
}
if(this.top > positionTop){
this.top = positionTop;
}
if(this.left < this.offset){
this.left = this.offset;
}
if(this.left > positionRight){
this.left = positionRight;
}
}

Thanks in advance,

Rajesh

[Svet]

Hi Rajesh,

Indeed, the recently created how-to article demonstrating an example how to re-position the Window dynamically:
https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/how-to/dynamically-reposition-window/

could be adjusted so that it uses the (leftChange) and (topChange) events instead of the (dragEnd). However, in order for this approach to function as expected we will need to use a setTimeout function each time we want to re-position the Window, which will lead to a visual defect of constant flashing as the Window component will have to be re-rendered every time the (leftChange) or (topChange) event fires. Check the following example demonstrating this scenario:
https://stackblitz.com/edit/angular-f7nhhj?file=app/app.component.ts

I hope it illustrates the desired approach. Let me know in case I am missing something or further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Rajesh]

Hi Svetlin,

Thanks for the information.I will use either dragEnd (or) leftChange/topChange which ever looks good

I need one information regarding kendo window. I have to achieve this functionality for a kendo window whose width is fixed, but height varies each time depending on the selection of items. (We have list of records in a grid. A kendo window is displayed when select a record in grid. So the data and height of window varies for each item)

 

For re positioning the window, we need the current height of the window. Is there any way to get the current window height dynamically ?

[Svet]

Hi Rajesh,

In order to keep the history of the forum clean, I opened a new ticket on your behalf regarding the last requirement: 

https://www.telerik.com/account/support-tickets/view-ticket?threadid=1408933

Let's keep the communication there.

Regards,
Svetlin
Progress Telerik

[congdongdientu.]

And how about the dynamically re-position for window kendo service

How to set the offset for this ?

public showValuationReport(dataItem) {
    document.body.style.overflow = "hidden";
    this.bgOverlayOpened = true;
    const windowRef = this.windowService.open({
      title: 'Valuation Report',
      content: PaperworkViewerComponent,
      // appendTo: this.containerRef,
      // top: 12,
      // left: 12
    });
    const window: PaperworkViewerComponent = windowRef.content.instance;
    const reportOptions = {
      reportType: '',
      reportName: 'VehicleInfoSheet',
      stockId: dataItem.stockId,
      branchId: dataItem.branchId,
    }
    window.reportOptions = reportOptions;
    windowRef.result.subscribe(result => {
        if (result instanceof WindowCloseResult) {
          this.bgOverlayOpened = false;
          document.body.style.overflow = "";
        } else { }
    })
  }

[Svet]

Hi,

What could be done when using the Angular service to open the Window is to change the values passed to the top and left properties of the window instance once created:

  public openWindow() {
      const window: WindowRef = this.windowService.open({
          title: 'My Window',
          content: 'My Content!',
          width: 450,
          height: 200
      });

      window.window.instance.left = 0;
      window.window.instance.top = 0;


      window.result.subscribe((result) => {
          if (result instanceof WindowCloseResult) {
              console.log('Window was closed!');
          }
      });
  }

Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-weq4zz?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Rajan]

Hi, I need to manage/change the position of the window when minimized. I need to keep it at the bottom. When I tried the suggestion provided above link https://stackblitz.com/edit/angular-weq4zz?file=app/app.component.ts , it did not work as expected. Please see the modified code below.

 

import { Component } from '@angular/core';
import {
  WindowService,
  WindowRef,
  WindowCloseResult
} from '@progress/kendo-angular-dialog';
@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <button (click)="openWindow()" class="k-button">Open Window</button>
    </div>
    <div kendoWindowContainer></div>
  `
})
export class AppComponent {
   lastHeight = 0;
  constructor( private windowService: WindowService ) {}
  public openWindow() {
      const window: WindowRef = this.windowService.open({
          title: 'My Window',
          content: 'My Content!',
          width: 450,
          height: 200
      });
      window.window.instance.left = 0;
      window.window.instance.top = 0;
        window.window.instance.topChange.subscribe(currentTop => {
            if (window.window.instance.state === "default")
                this.lastHeight = window.window.instance.top;
        });
        window.window.instance.stateChange.subscribe(state => {
            if (state === "default")  {
                window.window.instance.top = this.lastHeight;
                console.log("height applied " + this.lastHeight);
            }
            else if (state === 'minimized') {
              window.window.instance.top = 100;
              console.log("height applied " + 100);
            }
        });
      window.result.subscribe((result) => {
          if (result instanceof WindowCloseResult) {
              console.log('Window was closed!');
          }
      });
  }
}