All Components

Dimensions and Resizing

The Window enables you to set its width and height, and change its dimensions by dragging the resize handles.

Dimensions

To define the dimensions of the Window, use its width and height bindings. The width and height bindings support two-way binding.

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

      <kendo-window [(width)]="windowWidth" [(height)]="windowHeight" title="Arm Chair" *ngIf="opened" (close)="openClose(false)">
        <h4>Armchair 402</h4>
        <div class="armchair"><img src="https://demos.telerik.com/kendo-ui/content/web/window/armchair-402.png" alt="Armchair 402" /></div>
        <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

        <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

        <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>

        <p>Source: <a href="https://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
      </kendo-window>
    `
})
class AppComponent {
    public windowWidth = 600;
    public windowHeight = 500;
    public opened: boolean = true;

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

Resizing

By default, the Window enables you to resize it by dragging its edges (resize handles). To control this behavior, use the resizable binding.

You can also control the minimum allowed dimensions of the Window by using the minWidth and minHeight bindings.

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

      <kendo-window [minWidth]="200" [minHeight]="200" [resizable]="isResizable" *ngIf="opened" (close)="openClose(false)" title="Resize me">
        <p style="text-align: center;" *ngIf="isResizable">I can be resized!</p>
        <p style="text-align: center;" *ngIf="!isResizable">I cannot be resized!</p>
      </kendo-window>
    `
})
class AppComponent {
    public opened: boolean = true;
    public isResizable: boolean = true;

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