All Components

Keyboard Navigation

The keyboard navigation of the Window is always available.

The Window supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Moves the Window upwards.
Down Arrow Moves the Window downwards.
Left Arrow Moves the Window to the left.
Right Arrow Moves the Window to the right.
Ctrl+Up Arrow Narrows the Window in a vertical direction.
Ctrl+Down Arrow Expands the Window in a vertical direction.
Ctrl+Left Arrow Narrows the Window in a horizontal direction.
Ctrl+Right Arrow Expands the Window in a horizontal direction.
Alt+Down Arrow Minimizes and restores the Window.
Alt+Up Arrow Maximizes and restores the Window.
Esc Closes the Window.
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 { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

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