All Components

Title

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

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

@Component({
    selector: 'my-app',
    template: `
      <kendo-dialog title="Awesome title goes here">
      </kendo-dialog>
    `
})
class AppComponent { }

To customize the title by adding arbitrary components, nest them inside <kendo-dialog-titlebar>.

@Component({
    selector: 'my-app',
    template: `
      <kendo-dialog>
        <kendo-dialog-titlebar>
          <div style="font-size: 18px; line-height: 1.3em;">
            <span class="k-icon k-i-print"></span> Print this page
          </div>
        </kendo-dialog-titlebar>

          <p style="margin: 30px; text-align: center;">A sample print dialog.</p>
      </kendo-dialog>
    `
})
class AppComponent { }

If title is not specified, the Dialog will not display a title.

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