Responsive Toolbar

The responsive toolbar enables you to hide the tools that do not fit the width of the toolbar in an overflow popup.

By default, the toolbar of the Editor is responsive. To implement a custom responsive toolbar, use the overflow input property. Setting overflow to true enables the responsive behavior of the toolbar. Setting overflow to false renders the tools that do not fit the width of the toolbar on a second row.

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

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper">
        <button kendoButton *ngIf="!opened" (click)="open()">Open window</button>
        <kendo-window title="New Message" *ngIf="opened" (close)="close()" [minWidth]="250" [width]="600">
          <form>
            <kendo-editor [value]="value" style="height: 350px;">
              <kendo-toolbar [overflow]="true" [style.width.%]="toolbarWidth">
                <kendo-toolbar-buttongroup>
                  <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
                </kendo-toolbar-buttongroup>
                <kendo-toolbar-buttongroup>
                  <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
                </kendo-toolbar-buttongroup>
                <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
                <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>
                <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>
                <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>
                <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>
                <kendo-toolbar-buttongroup>
                  <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>
                  <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
                </kendo-toolbar-buttongroup>
              </kendo-toolbar>
            </kendo-editor>
            <p>
            <div class="text-right">
              <button type="button" class="k-button" (click)="close()">Cancel</button>
              <button type="button" class="k-button k-primary" (click)="send()">Send</button>
            </div>
          </form>
        </kendo-window>
      </div>
    `
})
export class AppComponent {
  public opened: Boolean = true;
  public dataSent: Boolean = false;

  public splitButtonData: Array<any> = [
    {
        text: 'Keep Text Only',
        icon: 'paste-plain-text'
    },
    {
        text: 'Paste as HTML',
        icon: 'paste-as-html'
    },
    {
        text: 'Paste Markdown',
        icon: 'paste-markdown'
    }
];

public dropdownButtonData: Array<any> = [
    {
        text: 'Keep Text Only',
        icon: 'paste-plain-text'
    },
    {
        text: 'Paste as HTML',
        icon: 'paste-as-html'
    },
    {
        text: 'Paste Markdown',
        icon: 'paste-markdown'
    }
];

  public value: String = `Resize the window to see how ToolBar's items are shown or hidden according to the available space.`;

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

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

  public send(): void {
      this.dataSent = true;
      this.opened = false;
  }
}
import { NgModule } from '@angular/core';
import { Component } 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 { EditorModule } from '@progress/kendo-angular-editor';

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

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

In this article