ejToolbar

3 Aug 201824 minutes to read

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){



    }
}