Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools" [disabled]="true">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
height String | Number 35

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
initTools (type?: String, index?: Number, tool?: Any, menuToolIninitialization?: Boolean) => Void null

Sets or gets the initTools property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
minimizeWidth Number 200

Sets or gets the minimizeWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools" [minimizeWidth]="250">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
minWidth String | Number null

Sets or gets the minWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools" [minWidth]="300">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
maxWidth String | Number null

Sets or gets the maxWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools" [maxWidth]="1200">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools" [rtl]="true">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
tools enum:ToolBarTools ''
enum ToolBarTools {
     button,
     toggleButton,
     dropdownlist,
     combobox,
     input,
     custom
}

Sets or gets the tools property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools" [theme]="'energyblue'">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
width String | Number null

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent {
     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}

Events

close Event

This event is triggered when the minimize pop-up menu is closed.

Code examples

Bind to the close event of jqxToolBar. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar(onClose)="Close($event)"
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent {
    Close(event: any): void 
    {
        // Do Something
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
open Event

This event is triggered when the minimize pop-up menu is opened.

Code examples

Bind to the open event of jqxToolBar. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar(onOpen)="Open($event)"
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent {
    Open(event: any): void 
    {
        // Do Something
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}

Methods

NameReturn TypeArguments
addTool Void type: String,
position: String,
separator: Boolean,
menuToolIninitialization: (type?: String, tool?: Any, menuToolIninitialization?: Boolean) => Void 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myToolBar') myToolBar: jqxToolBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myToolBar.addTool('button','first','',null);
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
disableTool Void index: Number,
disable: Boolean 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myToolBar') myToolBar: jqxToolBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myToolBar.disableTool(1,true);
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
destroy Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myToolBar') myToolBar: jqxToolBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myToolBar.destroy();
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
destroyTool Void index: Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myToolBar') myToolBar: jqxToolBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myToolBar.destroyTool(1);
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
getTools Array<ToolBarToolItem> None
interface ToolBarToolItem {
     type?: String;
     tool?: Any;
     separatorAfterWidget?: Boolean;
     minimizable?: Boolean;
     minimized?: Boolean;
     menuTool?: Any;
     menuSeparator?: Any;
}
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myToolBar') myToolBar: jqxToolBarComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myToolBar.getTools();
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
render Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myToolBar') myToolBar: jqxToolBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myToolBar.render();
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}
refresh Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxToolbar #myToolBar
            [width]="700" [height]="35" [tools]="tools" [initTools]="initTools">
        </jqxToolbar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myToolBar') myToolBar: jqxToolBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myToolBar.refresh();
    }

     tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization: any): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };
}