ejToolbar

The Toolbar control supports displaying a list of tools within a web page. This control is capable of customizing toolbar items with any functionality by using enriched client-side methods. This control is composed of collection of unordered lists containing text and images contained into a div.

Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.toolbar.js

    Members

    cssClass string

    Sets the root CSS class for Toolbar control to achieve the custom theme.

    Default Value

    • ””

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" cssClass="cssClass" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    The css must be placed in stylesheet.

  • html
  • <style>
    .cssClass{
        border: 10px solid grey;
    }
    </style>

    dataSource object

    Specifies dataSource value for the Toolbar control during initialization.

    Default Value

    • null

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    disabledItemIndices array

    Disables an Item or set of Items that are enabled in the Toolbar

    Default Value

    • []

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [disabledItemIndices]="disabledItemIndices"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        disabledItemIndices: array;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
            this.disabledItemIndices = [1,2];
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    enabled boolean

    Specifies the Toolbar control state.

    Default Value

    • true

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [enabled]=true  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    enabledItemIndices array

    Enables an Item or set of Items that are disabled in the Toolbar

    Default Value

    • []

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [disabledItemIndices]="disabledItemIndices" [enabledItemIndices]="enabledItemIndices" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        disabledItemIndices: array;
        enabledItemIndices: array;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
            this.disabledItemIndices = [1,2,3,4,5,6,7];
            this.enabledItemIndices = [1,2];
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    enableRTL boolean

    Specifies enableRTL property to align the Toolbar control from right to left direction.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [enableRTL]=true [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    enableSeparator boolean

    Allows to separate the each UL items in the Toolbar control.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    fields string

    Specifies the mapping fields for the data items of the Toolbar

    Default Value

    • null

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    fields.group string

    Defines the group name for the item.

    fields.htmlAttributes object

    Defines the HTML attributes such as id, class, styles for the item to extend the capability.

    fields.id string

    Defines id for the tag.

    fields.imageAttributes string

    Defines the image attributes such as height, width, styles and so on.

    fields.imageUrl string

    Defines the imageURL for the image location.

    fields.spriteCssClass string

    Defines the sprite CSS for the image tag.

    fields.text string

    Defines the text content for the tag.

    fields.tooltipText string

    Defines the tooltip text for the tag.

    fields.template string

    Allows you to add template as toolbar item

    height number|string

    Specifies the height of the Toolbar.

    Default Value

    • 28

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [height]="height" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        height: number;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
            this.height = 30;
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    htmlAttributes object

    Specifies the list of HTML attributes to be added to toolbar control.

    Default Value

    • {}

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [htmlAttributes]="attributes" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        attributes: Object;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
            this.attributes={title:"demo"};
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    hide boolean

    Specifies whether the Toolbar control is need to be show or hide.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [hide]=true [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    isResponsive boolean

    Enables/Disables the responsive support for Toolbar items during the window resizing time.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
     <ej-toolbar  id="editingtoolbar"  width="400px"  [enableSeparator]=true [isResponsive]=true >
    
                                <ul>
                                    <li id="cut" class="e-icon e-cut_01" title="Cut"></li>
                                    <li id="copy" class="e-icon e-copy_02" title="Copy"></li>
                                    <li id="paste" class="e-icon e-paste_01" title="Paste"></li> 
                                </ul>
                                <ul>
                                    <li id="Bold" class="e-icon e-bold_01" title="Bold"> 
                                    </li> 
                                    <li id="UndeLine" class="e-icon e-underline_01" title="UnderLine"> 
                                    </li>
                                    <li id="StrikeThrough" class="e-icon e-strikethrough_01" title="Strike Through"> 
                                    </li>
                                </ul>
    
    
    
    
    
    
    
    <ul>
                                    <li id="Left" class="e-icon e-align-left_01" title="Left"> 
                                    </li>
                                    <li id="Center" class="e-icon e-align-center_01" title="Center"> 
                                    </li>
                                    <li id="Right" class="e-icon e-align-right_01" title="Right"> 
                                    </li>
                                    <li id="Justify" class="e-icon e-align-justify_01" title="Justify"> 
                                    </li>
                                </ul> 
    
    
    
    
    
    
    
    <ul>
                                    <li id="cut0" class="e-icon e-cut_01" title="Cut"></li>
                                    <li id="copy0" class="e-icon e-copy_02" title="Copy"></li>
                                    <li id="paste0" class="e-icon e-paste_01" title="Paste"></li> 
                                </ul>
                                <ul>
                                    <li id="Bold0" class="e-icon e-bold_01" title="Bold"> 
                                    </li> 
                                    <li id="UndeLine0" class="e-icon e-underline_01" title="UnderLine"> 
                                    </li>
                                    <li id="StrikeThrough0" class="e-icon e-strikethrough_01" title="Strike Through"> 
                                    </li>
                                </ul>
    
    
    
    
    
    
    
    <ul>
                                    <li id="Left0" class="e-icon e-align-left_01" title="Left"> 
                                    </li>
                                    <li id="Center0" class="e-icon e-align-center_01" title="Center"> 
                                    </li>
                                    <li id="Right0" class="e-icon e-align-right_01" title="Right"> 
                                    </li>
                                    <li id="Justify0" class="e-icon e-align-justify_01" title="Justify"> 
                                    </li>
                                </ul> 
    
    
    
    
    
    
    
     <ul>
                                    <li id="cut1" class="e-icon e-cut_01" title="Cut"></li>
                                    <li id="copy1" class="e-icon e-copy_02" title="Copy"></li>
                                    <li id="paste1" class="e-icon e-paste_01" title="Paste"></li> 
                                </ul>
                                <ul>
                                    <li id="Bold1" class="e-icon e-bold_01" title="Bold"> 
                                    </li> 
                                    <li id="UndeLine1" class="e-icon e-underline_01" title="UnderLine"> 
                                    </li>
                                    <li id="StrikeThrough1" class="e-icon e-strikethrough_01" title="Strike Through"> 
                                    </li>
                                </ul>
    
    
    
    
    
    
    
    <ul>
                                    <li id="Left1" class="e-icon e-align-left_01" title="Left"> 
                                    </li>
                                    <li id="Center1" class="e-icon e-align-center_01" title="Center"> 
                                    </li>
                                    <li id="Right1" class="e-icon e-align-right_01" title="Right"> 
                                    </li>
                                    <li id="Justify1" class="e-icon e-align-justify_01" title="Justify"> 
                                    </li>
                                </ul>
                  
    </ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        constructor() {
        }
    }

    Items object

    Specifies the items of Toolbar

    Default Value

    • null

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [Items]="data" id="toolbar"  [enableSeparator]="separator" width="550px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        data: Array<any>;
        constructor() {
            this.data = [
                
                                { id: "button1", text: "Button1" ,group:"group1", tooltipText:"button1" , height:"20px", spriteCssClass: "editTools cursor",htmlAttributes: {class:"e-item "} },
    
    
    
    
    
    
    
    { id: "button2",group:"group1",text:"Button2",spriteCssClass: "editTools select",tooltipText:"button2"},
    
    
    
    
    
    
    
    { id: "button3", group:"group1",template:"<input type='text' id='dropdown1' />"},
    
    
    
    
    
    
    
    { id: "button4", text: "Button4" ,group:"group2",spriteCssClass: "editTools rectangle select",tooltipText:"button4"},
                                { id: "button5", text: "Button5",group:"group2",spriteCssClass: "editTools round select",tooltipText:"button5",imageUrl:"content/images/toolbar/Check.png",imageAttributes:{width: 20, height: 20}}];
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    Items.group string

    Defines the group name for the item.

    Items.htmlAttributes object

    Defines the HTML attributes such as id, class, styles for the item .

    Items.id string

    Defines id for the tag.

    Items.imageAttributes string

    Defines the image attributes such as height, width, styles and so on.

    Items.imageUrl string

    Defines the imageURL for the image location.

    Items.spriteCssClass string

    Defines the sprite CSS for the image tag.

    Items.text string

    Defines the text content for the tag.

    Items.tooltipText string

    Defines the tooltip text for the tag.

    Items.template string

    Allows to add template as toolbar item.

    orientation enum|string

    Specifies the Toolbar orientation. See orientation

    Name Description
    Horizontal To set the horizontal orientation for toolbar control
    Vertical To set the vertical orientation for toolbar control

    Default Value

    • Horizontal

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" orientation="vertical" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    query object

    Specifies the query to retrieve the data from the online server. The query is used only when the online dataSource is used.

    Default Value

    • null

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="dataManager" id="toolbar" [query]="query" [fields]="fields" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        dataManager: any;
        query: any;
        separator: boolean;
        constructor() {
            
            this.separator = true;
            this.dataManager = ej.DataManager({
    url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
    });
     // Query creation.
    this.query = ej.Query()
                    .from("Orders").take(6);
            this.fields = { tooltipText: 'EmployeeID', text:'CustomerID', spriteCssClass: 'spriteCss' };
        }
    }

    responsiveType enum|string

    Specifies the Toolbar responsive type.

    Name Description
    Popup To display the toolbar overflow items as popup
    Inline To display the toolbar overflow items as inline toolbar

    Default Value

    • Popup

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" responsiveType="inline" [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    showRoundedCorner boolean

    Displays the Toolbar with rounded corners.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields" [showRoundedCorner]=true  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    width number|string

    Specifies the width of the Toolbar.

    Default Value

    • ””

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
    }

    WIDTH

    Methods

    deselectItem(element)

    Deselect the specified Toolbar item.

    Parameter Type Description
    element object The element need to be deselected

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar id="toolbar" [enableSeparator]="separator" width="250px">
    
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    
    </ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Deselect Item</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        separator: boolean;
        constructor() {
            this.separator = true;
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("selectItem",$("li")[3]);//Select the Toolbar item.
            $("#toolbar").ejToolbar("deselectItem",$("li")[3]); //Deselect the Toolbar item.
    
    }
    }

    deselectItemByID(ID)

    Deselect the Toolbar item based on specified id.

    Parameter Type Description
    ID string The ID of the element need to be deselected

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Deselect Item</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("selectItemByID","1");//Select the Toolbar item by id.
            $("#toolbar").ejToolbar("deselectItemByID","1"); // To Deselect the Toolbar item by id.
    
        }
    }

    destroy()

    Allows you to destroy the Toolbar widget.

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Destroy</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("destroy");
        }
    }

    disable()

    To disable all items in the Toolbar control.

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("disable");
        }
    }

    disableItem(element)

    Disable the specified Toolbar item.

    Parameter Type Description
    element object The element need to be disabled

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("disableItem",$("li")[3]);
        }
    }

    disableItemByID(ID)

    Disable the Toolbar item based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be disabled

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("disableItemByID","2");
        }
    }

    enable()

    Enable the Toolbar if it is in disabled state.

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">enable</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("enable");
        }
    }

    enableItem(element)

    Enable the Toolbar item based on specified item.

    Parameter Type Description
    element object The element need to be enabled

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Enable Item</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("enableItem",$("li")[3]);
        }
    }

    enableItemByID(ID)

    Enable the Toolbar item based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be enabled

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">EnableItem</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("enableItemByID","3");
        }
    }

    hide()

    To hide the Toolbar

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Hide</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("hide");
        }
    }

    removeItem(element)

    Remove the item from toolbar, based on specified item.

    Parameter Type Description
    element object The element need to be removed

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove Item</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("removeItem",$("li")[3]);
        }
    }

    removeItemByID(ID)

    Remove the item from toolbar, based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be removed

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove Item</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("removeItemByID","3");
        }
    }

    selectItem(element)

    Selects the item from toolbar, based on specified item.

    Parameter Type Description
    element object The element need to be selected

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove Item</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("removeItem",$("li")[3]);
        }
    }

    selectItemByID(ID)

    Selects the item from toolbar, based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be selected

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove Item</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("removeItemByID","3");
        }
    }

    show()

    To show the Toolbar.

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px"></ej-toolbar>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Show</button>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        OnClick(){
    
    
    $("#toolbar").ejToolbar("show");
        }
    }

    Events

    click

    Fires after Toolbar control is clicked.

    </tr>
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    event object return the event object
    model object returns the Toolbar model
    type string returns the name of the event
    target object returns the target of the current object.
    currentTarget object returns the target of the current object.
    status boolean return the Toolbar state

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (ejclick)="click($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        click(args){
    
    
    
        }
    }

    create

    Fires after Toolbar control is created.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (create)="create($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        create(args){
    
    
    
        }
    }

    focusOut

    Fires after Toolbar control is focused.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (focusOut)="focusOut($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        focusout(args){
    
    
    
        }
    }

    destroy

    Fires when the Toolbar is destroyed successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (destroy)="destroy($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        destroy(args){
    
    
    
        }
    }

    itemHover

    Fires after Toolbar control item is hovered.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    target object returns the target of the current object.
    currentTarget object returns the target of the current object.
    status boolean return the Toolbar state

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (itemHover)="itemHover($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        itemHover(args){
    
    
    
        }
    }

    itemLeave

    Fires after mouse leave from Toolbar control item.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    target object returns the target of the current object.
    currentTarget object returns the target of the current object.
    status boolean return the Toolbar state

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (itemLeave)="itemLeave($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        itemLeave(args){
    
    
    
        }
    }

    overflowOpen

    Fires when the overflow popup of toolbar is opened.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    clientX number Returns the current X position of the target .
    clientY number Returns the current Y position of the target .
    currentTarget object returns the target of the current object.

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (overflowOpen)="overflowOpen($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        overflowOpen(args){
    
    
    
        }
    }

    overflowClose

    Fires when the overflow popup of toolbar is closed.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    clientX number Returns the current X position of the target .
    clientY number Returns the current Y position of the target .
    currentTarget object returns the target of the current object.

    Example

  • html
  • <div id="toolbar_controls" style="margin-left: 35%;">
    <ej-toolbar  [dataSource]="data" id="toolbar" [fields]="fields"  [enableSeparator]="separator" width="250px" (overflowClose)="overflowClose($event)"></ej-toolbar>
    </div>
  • ts
  • import { Component, ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './default.component.html',
        styleUrls: ['./toolbar.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class DefaultComponent {
        fields: Object;
        data: Array<any>;
        separator: boolean;
        constructor() {
            this.data = [
                {
                    id: '1', tooltip: 'New mail',
                    spriteCss: 'mail folder',
    
                }, {
                    id: '2', tooltip: 'Calendar',
                    spriteCss: 'mail categorize',
    
                }, {
                    id: '3', tooltip: 'Appointments',
                    spriteCss: 'mail flag',
    
                }, {
                    id: '4', tooltip: 'Week',
                    spriteCss: 'mail forward',
    
                }, {
                    id: '5', tooltip: 'Month',
                    spriteCss: 'mail new',
    
                },
                {
                    id: '6', tooltip: 'Notes',
                    spriteCss: 'mail reply',
    
                },
                {
                    id: '7', tooltip: 'Deleted',
                    spriteCss: 'mail done',
    
                }
            ];
    
            this.separator = true;
    
            this.fields = { tooltipText: 'tooltip', id: 'id', spriteCssClass: 'spriteCss' };
        }
        overflowClose(args){
    
    
    
        }
    }