All Components

Window Overview

The Window displays content in a non-modal HTML window which can be moved and resized.

Basic Usage

The following example demonstrates the Window in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper">
        <button kendoButton *ngIf="!opened" (click)="open()">Open window</button>
        <p *ngIf="dataSaved">Data has been saved</p>
        <kendo-window title="Please provide additional data" *ngIf="opened" (close)="close()" [minWidth]="250" [width]="450">

        <form class="k-form">
            <fieldset>
                <legend>User Details</legend>

                <label class="k-form-field">
                    <span>First Name</span>
                    <input class="k-textbox" placeholder="Your Name" />
                </label>
                <label class="k-form-field">
                    <span>Last Name</span>
                    <input class="k-textbox" placeholder="Your Last Name" />
                </label>
            </fieldset>

            <div class="text-right">
                <button type="button" class="k-button" (click)="close()">Cancel</button>
                <button type="button" class="k-button k-primary" (click)="submit()">Submit</button>
            </div>
        </form>

        </kendo-window>
      </div>
    `
})
export class AppComponent {
    public opened = true;
    public dataSaved = false;

    public close() {
      this.opened = false;
    }

    public open() {
      this.opened = true;
    }

    public submit() {
        this.dataSaved = true;
        this.close();
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WindowModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, WindowModule, ButtonsModule ]
})
export class AppModule {
}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Features

The Window delivers the following features:

Title

To set a title to the Window, use its title property.

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

      <kendo-window title="Awesome title goes here" *ngIf="opened" (close)="openClose(false)">
      </kendo-window>
    `
})
class AppComponent {
    public opened: boolean = true;

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

To customize the title by adding arbitrary components:

  1. Nest the components inside <kendo-window-titlebar>.
  2. Include the needed actions.

Using a <kendo-window-titlebar> element overrides the title property (if set).

<kendo-window>
  <kendo-window-titlebar>
    <div style="font-size: 18px; line-height: 1.3em;">
      <span class="k-icon k-i-print"></span> Print this page
    </div>
    <button kendoWindowMaximizeAction></button>
    <button kendoWindowRestoreAction></button>
  </kendo-window-titlebar>

    <p style="margin: 30px; text-align: center;">A sample print window.</p>
</kendo-window>

If title is not specified, the Window will display a title bar with the default actions instead of a title.

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

      <kendo-window *ngIf="opened" (close)="openClose(false)" [width]="450">
        <div style="text-align: center; margin: 30px;">
            <h4>Enter your e-mail below to unlock.</h4>
            <p>
                <input class="k-textbox" placeholder="Your e-mail here" style="width: 300px;" />
            </p>
            <p>
                <button kendoButton primary="true" style="width: 300px;">GET MY $10 OFF</button>
            </p>
            <a href="#">No thanks!</a>
        </div>
      </kendo-window>
    `
})
class AppComponent {
    public opened: boolean = true;

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

Visibility

To control the visibility of the Window, use the ngIf directive. By default, the component is visible. To hide it, bind ngIf to a falsy value.

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

      <kendo-window title="My Window" *ngIf="opened" (close)="close()">
          <p style="margin: 30px; text-align: center;">The window was opened.</p>
      </kendo-window>
    `
})
class AppComponent {
    // Do not initially show the Window
    public opened: bool = false;

    public close() {
      this.opened = false;
    }

    public open() {
      this.opened = true;
    }
}

Dimensions

To specify 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;
    }
}

Position

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;
    }
}

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;
    }
}

State Persistence

The Window enables you to minimize and maximize it through the title bar commands. To initially set the state and persist it, use the state binding. To control whether the content of the Window is persisted in the DOM, use the keepContent binding.

@Component({
    selector: 'my-app',
    template: `
      <p><button kendoButton *ngIf="!opened" (click)="openClose(true)">Open</button></p>
      <p>The state of the Window is <b>{{windowState}}</b></p>
      <kendo-window [top]="100" [left]="50" title="Change my state" [(state)]="windowState" *ngIf="opened" (close)="openClose(false)">
        <p style="text-align: center;">I can be minimized and maximized!</p>
      </kendo-window>
    `
})
class AppComponent {
    public windowState: WindowState = 'default';
    public opened: boolean = true;

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

Custom Actions

You can add custom actions along the built-in minimize, maximize, restore, and close actions of the Window. Any kendoButton that is added to the kendo-window-titlebar will be rendered alongside the built-in commands.

@Component({
    selector: 'my-app',
    template: `
      <kendo-window>
        <kendo-window-titlebar>
            <div class='k-window-title'>Custom action</div>
            <button kendoButton (click)="onClick($event)" [icon]="'folder'" [look]="'bare'"></button>
            <button kendoWindowMaximizeAction></button>
            <button kendoWindowRestoreAction></button>
        </kendo-window-titlebar>
        <p style="text-align: center;">I have a custom folder action!</p>
      </kendo-window>
    `
})
class AppComponent {
    public onClick(e) {
        alert('Custom Action Clicked');
    }
}

Events

The following example demonstrates basic Window events.

import { Component } from '@angular/core';

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

      <kendo-window [top]="100" [left]="100" title="My Window"
        *ngIf="opened"
        (dragStart)="onDragStart()"
        (dragEnd)="onDragEnd()"
        (resizeStart)="onResizeStart()"
        (resizeEnd)="onResizeEnd()"
        (stateChange)="onStateChange($event)"
        (close)="onClose()"
      >
        <p style="text-align: center;">Events are logged below</p>
      </kendo-window>
      <event-log title="Event log" [events]="events">
      </event-log>
    `
})
export class AppComponent {
    public opened = true;
    public events: string[] = [];

    public onDragStart(): void {
        this.log('Drag Start');
    }

    public onDragEnd(): void {
        this.log('Drag End');
    }

    public onResizeStart(): void {
        this.log('Resize Start');
    }

    public onResizeEnd(): void {
        this.log('Resize End');
    }

    public onStateChange(state): void {
        this.log('State Changed to ' + state);
    }

    public onClose(): void {
        this.opened = false;
        this.log('Window was closed');
    }

    public open(): void {
        this.opened = true;
        this.log('Window was opened');
    }

    private log(event: string): void {
        this.events = [event].concat(this.events);
    }
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WindowModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent, EventLogComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, WindowModule, ButtonsModule ]
})
export class AppModule {
}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article