All Components

Positioning and Dragging

The Window enables you to set its position and move it by dragging.

Positioning

To specify the position of the Window, use its top and left bindings. The top and left bindings support two-way binding. If these bindings are not provided, the Window will be initially positioned in the center of the viewport.

@Component({
    selector: 'my-app',
    template: `
      <button kendoButton *ngIf="!opened" (click)="openClose(true)">Open</button>

      <kendo-window [(top)]="windowTop" [(left)]="windowLeft" title="Status" *ngIf="opened" (close)="openClose(false)">
        <p style="text-align: center;">Successful!</p>
      </kendo-window>
    `
})
class AppComponent {
    public windowTop: number = 100;
    public windowLeft: number = 50;
    public opened: boolean = true;

    public openClose(isOpened: boolean) {
      this.opened = isOpened;
    }
}

Dragging

By default, the Window enables you to move it by dragging. To control this behavior, use the draggable binding.

@Component({
    selector: 'my-app',
    template: `
      <p><button kendoButton *ngIf="!opened" (click)="openClose(true)">Open</button></p>
      <input type="checkbox" id="dragChkBox" class="k-checkbox" [(ngModel)]="isDraggable">
      <label class="k-checkbox-label" for="dragChkBox">Enable/Disable dragging</label>

      <kendo-window [draggable]="isDraggable" *ngIf="opened" (close)="openClose(false)" title="Move me">
        <p style="text-align: center;" *ngIf="isDraggable">I can be moved!</p>
        <p style="text-align: center;" *ngIf="!isDraggable">I cannot be moved!</p>
      </kendo-window>
    `
})
class AppComponent {
    public opened: boolean = true;
    public isDraggable: boolean = true;

    public openClose(isOpened: boolean) {
      this.opened = isOpened;
    }
}
In this article