Item configuration in EJ2 TypeScript Toolbar control
11 Aug 202315 minutes to read
The Toolbar can be rendered by defining an array of items
. Items can be constructed with the following built-in command types or item template.
Button
Button
is the default command type
, and it can be rendered by using the text
property.
Properties of the button command type:
Property | Description |
---|---|
text |
The text to be displayed for button. |
id |
The ID of the button to be rendered. If the ID is not given, auto ID is generated. |
prefixIcon |
Defines the class used to specify an icon for the button. The icon is positioned before the text if text is available or the icon alone button is rendered. |
suffixIcon |
Defines the class used to specify an icon for the button. The icon is positioned after the text if text is available. If both prefixIcon and suffixIcon are specified, only prefixIcon is considered. |
width |
Used to set the width of the button. |
align |
Specifies the location for aligning Toolbar items. |
Separator
The Separator
type adds a vertical separation between the Toolbar’s single/multiple commands.
import {Toolbar} from '@syncfusion/ej2-navigations';
let toolbar: Toolbar = new Toolbar({
items: [
{ text: "Cut" },
{ text: "Copy" },
{ type: "Separator" },
{ text: "Paste" },
{ type: "Separator" },
{ text: "Undo" },
{ text: "Redo" }
]
});
toolbar.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Toolbar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" />
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='element'></div>
<br/><br/>
<div id='result'></div>
</div>
</body>
</html>
If
Separator
is added as the first or the last item, it will not be visible.
Input
The Input
type is only applicable for adding template
elements when the template
property is defined as an object
. Input type creates an input element
internally that acts as the container for Syncfusion
input based components.
Note: Set toolbar item type property value as
Input
only for Input components.
NumericTextBox
-
The
NumericTextBox
component can be included by importing theNumericTextBox
module fromej2-inputs
. -
Initialize the
NumericTextBox
in template property, where the Toolbar item type is set asInput
. -
Related
NumericTextBox
component properties can also be configured as given below.
new NumericTextBox( { format: 'c2' }))
DropDownList
-
The
DropDownList
component can be included by importing theDropDownList
module fromej2-dropdowns
. -
Initialize the
DropDownList
in template property, where the Toolbar item type is set asInput
. -
Related
DropDownList
component properties can also be configured as given below.
new DropDownList({ width:100 })
CheckBox
-
The
CheckBox
component can be included by importing theCheckBox
module fromej2-buttons
. -
Initialize the
CheckBox
in template property, where the Toolbar item type is set asInput
. -
Related
CheckBox
component properties can also be configured as given below.
new CheckBox({ label: 'Default' })
RadioButton
-
The
RadioButton
component can be included by importing theRadioButton
module fromej2-buttons
. -
Initialize the
RadioButton
in template property, where the Toolbar item type is set asInput
. -
Related
RadioButton
component properties can also be configured as given below.
new RadioButton({ label: 'Option 1', name: 'default'})
The above steps are applicable for all ‘Syncfusion’ input based components.
E.g.: The following code explains how to add NumericTextBox
,DropDownList
,RadioButton
and CheckBox
components to the Toolbar.
import { Toolbar } from '@syncfusion/ej2-navigations';
import { NumericTextBox} from '@syncfusion/ej2-inputs';
import { DropDownList} from '@syncfusion/ej2-dropdowns';
import { CheckBox, RadioButton } from '@syncfusion/ej2-buttons';
let sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
let toolbar: Toolbar = new Toolbar({
items: [
{ text: "Cut" },
{ text: "Copy" },
{ type: "Separator" },
{ text: "Undo" },
{ text: "Redo" },
{ type: "Separator" },
{ type: 'Input', template: new NumericTextBox({ format: 'c2', value:1, width:150 }) },
{ type: "Separator" },
{ type: 'Input', template: new DropDownList({ dataSource: sportsData, width: 120, index: 2 }) },
{ type: "Separator" },
{ type: 'Input', template: new CheckBox({ label: 'Checkbox', checked: true }) },
{ type: "Separator" },
{ type: 'Input', template: new RadioButton({ label: 'Radio', name: 'default', checked: true }) }
]
});
toolbar.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Toolbar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" />
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='element'></div>
<br/><br/>
<div id='result'></div>
</div>
</body>
</html>
Enabling tab key navigation in Toolbar
The tabIndex
property of a Toolbar item is used to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the tabIndex
property allows you to switch between items using the Tab and Shift+Tab keys as well.
To use the tabIndex
property, you need to set it for each Toolbar item that you want to enable tab key navigation. The tabIndex
property should be set to a positive integer value. A value of 0 or a negative value will disable tab key navigation for the item.
For example, to enable tab key navigation for two Toolbar items, you can use the following code:
import {Toolbar} from '@syncfusion/ej2-navigations';
let toolbar: Toolbar = new Toolbar({
items: [
{ text: "Item 1", tabIndex: 1 },
{ text: "Item 2", tabIndex: 2 }
]
});
With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the tabIndex
values.
If you set the tabIndex
value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the tabIndex
values. For example:
import {Toolbar} from '@syncfusion/ej2-navigations';
let toolbar: Toolbar = new Toolbar({
items: [
{ text: "Item 1", tabIndex: 0 },
{ text: "Item 2", tabIndex: 0 }
]
});
In this case, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated in the order in which they appear in the DOM.
Example:
Here is an example of how you can use the tabIndex
property to enable tab key navigation for a Toolbar component:
import {Toolbar} from '@syncfusion/ej2-navigations';
let toolbar: Toolbar = new Toolbar({
width: 300,
overflowMode: 'Scrollable',
items: [
{ type: 'Button', prefixIcon: 'e-cut-icon tb-icons', text:'Cut', tabIndex: 0 },
{ type: 'Button', prefixIcon: 'e-copy-icon tb-icons', text:'Copy', tabIndex: 0},
{ type: 'Button', prefixIcon: 'e-paste-icon tb-icons', text:'Paste',tabIndex: 0},
{ type: 'Separator'},
{ type: 'Button', prefixIcon: 'e-bold-icon tb-icons', text:'Bold', tabIndex: 0},
{ type: 'Button', prefixIcon: 'e-underline-icon tb-icons', text:'Underline', tabIndex: 0},
{ type: 'Button', prefixIcon: 'e-italic-icon tb-icons', text:'Italic', tabIndex: 0},
{ type: 'Button', prefixIcon: 'e-color-icon tb-icons', text:'Color-Picker', tabIndex: 0 },
{ type: 'Separator'},
{ type: 'Button', prefixIcon: 'e-ascending-icon tb-icons', text:'A-Z Sort', tabIndex: 0 },
{ type: 'Button', prefixIcon: 'e-descending-icon tb-icons', text:'Z-A Sort', tabIndex: 0},
{ type: 'Button', prefixIcon: 'e-clear-icon tb-icons', text:'Clear', tabIndex: 0}]
});
toolbar.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Toolbar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" />
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='element'></div>
<br/><br/>
<div id='result'></div>
</div>
</body>
</html>
With the above code, the user can switch between the Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated based on the element order.