| Name | Type | Default |
|---|---|---|
| disabled | Boolean | false |
|
Sets or gets the 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 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 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 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 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 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 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 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 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 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
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
}
|
||
| open | Event | |
|
This event is triggered when the minimize pop-up menu is opened. Code examples
Bind to the
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
}
|
||
Methods |
||
| Name | Return Type | Arguments |
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||
| 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; |
||