Components / Dialogs / Window

Title

The Window provides options for displaying a title and customizing its behavior.

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.

If the title property is set and you use the <kendo-window-titlebar> element, the title configuration will be overridden.

@Component({
  selector: 'my-app',
  template: `
    <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>
  `
})
class AppComponent {
}

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

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

In this article