Ej1 api migration in EJ2 TypeScript Toolbar control

6 May 202518 minutes to read

This article describes the API migration process of Toolbar component from Essential® JS 1 to Essential® JS 2.

Accessibility

Behavior API in Essential® JS 1 API in Essential® JS 2
Localization Not Applicable Property: locale

let toolbar: Toolbar = new Toolbar({
  locale: ‘en-US’
});
toolbar.appendTo(‘#ej2Toolbar’);
RTL Property: enableRTL

var toolbar = new ej.Toolbar($(“#toolbar”), {
  enableRTL: true
});
Property: enableRtl

let toolbar: Toolbar = new Toolbar({
  enableRtl: true
});
toolbar.appendTo(‘#ej2Toolbar’);

DataSource

Behavior API in Essential® JS 1 API in Essential® JS 2
DataSource Property: dataSource

var toolbar = new ej.Toolbar($(“#toolbar”), {
  dataSource: items
});
Not Applicable
Query Property: query

var toolbar = new ej.Toolbar($(“#toolbar”), {
  query: query
});
Not Applicable
Fields Property: fields

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: {}
});
Not Applicable
Group Property: group

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { group: ‘’ }
});
Not Applicable
HtmlAttributes Property: htmlAttributes

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { htmlAttributes: {} }
});
Not Applicable
Id Property: id

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { id: ‘’ }
});
Not Applicable
ImageAttributes Property: imageAttributes

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { imageAttributes: {} }
});
Not Applicable
ImageUrl Property: imageUrl

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { imageUrl: ‘’ }
});
Not Applicable
SpriteCssClass Property: spriteCssClass

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { spriteCssClass: ‘’ }
});
Not Applicable
Text Property: text

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { text: ‘’ }
});
Not Applicable
TooltipText Property: tooltipText

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { tooltipText: ‘’ }
});
Not Applicable
Template Property: template

var toolbar = new ej.Toolbar($(“#toolbar”), {
  fields: { template: ‘’ }
});
Not Applicable

Items

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: items

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: []
});
Property: items

let toolbar: Toolbar = new Toolbar({
  items: []
});
toolbar.appendTo(‘#ej2Toolbar’);
Align Not Applicable Property: items[0].align

let toolbar: Toolbar = new Toolbar({
items: [{ align: ‘center’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Custom Class Not Applicable Property: items[0].cssClass

let toolbar: Toolbar = new Toolbar({
items: [{ cssClass: ‘e-class’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Group Name Property: items[0].group

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ group: ‘’ }]
});
Not Applicable
Html Attributes Property: items[0].htmlAttributes

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ htmlAttributes: {} }]
});
Property: items[0].htmlAttributes

let toolbar: Toolbar = new Toolbar({
  items: [{ htmlAttributes: {} }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Id Property: items[0].id

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ id: ‘’ }]
});
Property: items[0].id

let toolbar: Toolbar = new Toolbar({
  items: [{ id: ‘’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
ImageAttributes Property: items[0].imageAttributes

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ imageAttributes: {} }]
});
Not Applicable
ImageUrl Property: items[0].imageUrl

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ imageUrl: ‘’ }]
});
Not Applicable
Overflow Not Applicable Property: items[0].overflow

let toolbar: Toolbar = new Toolbar({
  items: [{ overflow: ‘popup’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
PrefixIcon Not Applicable Property: items[0].prefixIcon

let toolbar: Toolbar = new Toolbar({
  items: [{ prefixIcon: ‘e-icon’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
ShowAlwaysInPopup Not Applicable Property: items[0].showAlwaysInPopup

let toolbar: Toolbar = new Toolbar({
  items: [{ showAlwaysInPopup: true }]
});
toolbar.appendTo(‘#ej2Toolbar’);
ShowTextOn Not Applicable Property: items[0].showTextOn

let toolbar: Toolbar = new Toolbar({
  items: [{ showTextOn: ‘popup’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Sprite CssClass Property: items[0].spriteCssClass

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ spriteCssClass: ‘e-class’ }]
});
Not Applicable
SuffixIcon Not Applicable Property: items[0].suffixIcon

let toolbar: Toolbar = new Toolbar({
  items: [{ suffixIcon: ‘e-icon’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Template Property: items[0].template

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ template: ‘’ }]
});
Property: items[0].template

let toolbar: Toolbar = new Toolbar({
  items: [{ template: ‘’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Text Property: items[0].text

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ text: ‘Cut’ }]
});
Property: items[0].text

let toolbar: Toolbar = new Toolbar({
  items: [{ text: ‘Cut’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
TooltipText Property: items[0].tooltipText

var toolbar = new ej.Toolbar($(“#toolbar”), {
  items: [{ tooltipText: ‘Cut’ }]
});
Property: items[0].tooltipText

let toolbar: Toolbar = new Toolbar({
  items: [{ tooltipText: ‘Cut’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Type Not Applicable Property: items[0].type

let toolbar: Toolbar = new Toolbar({
  items: [{ type: ‘Button’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Width Not Applicable Property: items[0].width

let toolbar: Toolbar = new Toolbar({
  items: [{ width: ‘50’ }]
});
toolbar.appendTo(‘#ej2Toolbar’);
Disable Items Property: disabledItemIndices

var toolbar = new ej.Toolbar($(“#toolbar”), {
  disabledItemIndices: []
});
Method: enableItems(items, false)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.enableItems([], false);
Add Items Not Applicable Method: addItems(items, index)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.addItems([], 0);
RemoveItem Method: removeItem(element)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.removeItem(ele);
Method: removeItems(args)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.removeItems(0);
RemoveItemById Method: removeItemById(id)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.removeItemById(‘left’);
Not Applicable
Enable Item Method: enableItem(element)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.enableItem(ele);
Method: enableItems(items, true)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.enableItems(items, true);
EnableItemById Method: enableItemById(id)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.enableItemById(‘left’);
Not Applicable
Disable Item Method: disableItem(element)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.disableItem(ele);
Method: enableItems(items, false)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.enableItems([], false);
DisableItemById Method: disableItemById(id)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.disableItemById(‘left’);
Not Applicable
Show Item Not Applicable Method: hideItem(index, false)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.hideItem(0, false);
Hide Item Not Applicable Method: hideItem(index, true)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.hideItem(0, true);
SelectItem Method: selectItem(element)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.selectItem(ele);
Not Applicable
SelectItemById Method: selectItemById(id)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.selectItemById(‘left’);
Not Applicable
Deselect Item Method: deselectItem(element)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.deselectItem(ele);
Not Applicable
DeselectItemById Method: deselectItemById(id)

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.deselectItemById(‘left’);
Not Applicable
Clicked Not Applicable Event: clicked

let toolbar: Toolbar = new Toolbar({
  clicked: function(e: Event): void { }
});
toolbar.appendTo(‘#ej2Toolbar’);
itemHover Event: itemHover

var toolbar = new ej.Toolbar($(“#toolbar”), {
  itemHover: function(args) {}
});
Not Applicable
itemLeave Event: itemLeave

var toolbar = new ej.Toolbar($(“#toolbar”), {
  itemLeave: function(args) {}
});
Not Applicable

Common

Behavior API in Essential® JS 1 API in Essential® JS 2
Custom class Property: cssClass

var toolbar = new ej.Toolbar($(“#toolbar”), {
  cssClass: ‘customClass’
});
Not Applicable
Enabled Property: enabled

var toolbar = new ej.Toolbar($(“#toolbar”), {
  enabled: false
});
Not Applicable
EnableSeparator Property: enableSeparator

var toolbar = new ej.Toolbar($(“#toolbar”), {
  enableSeparator: false
});
Not Applicable
Height Property: height

var toolbar = new ej.Toolbar($(“#toolbar”), {
  height: 400
});
Property: height

let toolbar: Toolbar = new Toolbar({
  height: 700
});
toolbar.appendTo(‘#ej2Toolbar’);
HtmlAttributes Property: htmlAttributes

var toolbar = new ej.Toolbar($(“#toolbar”), {
  htmlAttributes: {}
});
Not Applicable
Hide Property: hide

var toolbar = new ej.Toolbar($(“#toolbar”), {
  hide: true
});
Not Applicable
Orientation Property: orientation

var toolbar = new ej.Toolbar($(“#toolbar”), {
  orientation: ej.Orientation.Horizontal
});
Not Applicable
OverflowModes Property: responsiveType

var toolbar = new ej.Toolbar($(“#toolbar”), {
  responsiveType: ‘popup’
});
Property: overflowMode

let toolbar: Toolbar = new Toolbar({
  overflowMode: ‘Popup’
});
toolbar.appendTo(‘#ej2Toolbar’);
Persistence Not Applicable Property: enablePersistence

let toolbar: Toolbar = new Toolbar({
  enablePersistence: true
});
toolbar.appendTo(‘#ej2Toolbar’);
Responsive Property: isResponsive

var toolbar = new ej.Toolbar($(“#toolbar”), {
  isResponsive: true
});
Not Applicable
ShowRounderCorner Property: showRoundedCorner

var toolbar = new ej.Toolbar($(“#toolbar”), {
  showRoundedCorner: false
});
Not Applicable
Width Property: width

var toolbar = new ej.Toolbar($(“#toolbar”), {
  width: 600
});
Property: width

let toolbar: Toolbar = new Toolbar({
  width: 500
});
toolbar.appendTo(‘#ej2Toolbar’);
Enable Method: enable()

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.enable();
Method: disable(false)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.disable(false);
Disable Method: disable()

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.disable();
Method: disable(true)

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.disable(true);
Show Method: show()

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.show();
Not Applicable
Hide Method: hide()

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.hide();
Not Applicable
Refresh Not Applicable Method: refresh()

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.refresh();
Destroy Method: destroy()

var toolbar = new ej.Toolbar($(“#toolbar”), {});
toolbar.destroy();
Method: destroy()

let toolbar: Toolbar = new Toolbar();
toolbar.appendTo(‘#ej2Toolbar’);
toolbar.destroy();
Click Event: click

var toolbar = new ej.Toolbar($(“#toolbar”), {
  click: function(args) {}
});
Not Applicable
BeforeCreate Not Applicable Event: beforeCreate

let toolbar: Toolbar = new Toolbar({
  beforeCreate: function(e: Event): void { }
});
toolbar.appendTo(‘#ej2Toolbar’);
Created Event: create

var toolbar = new ej.Toolbar($(“#toolbar”), {
  create: function(args) {}
});
Event: created

let toolbar: Toolbar = new Toolbar({
  created: function(e: Event): void { }
});
toolbar.appendTo(‘#ej2Toolbar’);
Destroyed Event: destroy

var toolbar = new ej.Toolbar($(“#toolbar”), {
  destroy: function(args) {}
});
Event: destroyed

let toolbar: Toolbar = new Toolbar({
  destroyed: function(e: Event): void { }
});
toolbar.appendTo(‘#ej2Toolbar’);
FocusOut Event: focusOut

var toolbar = new ej.Toolbar($(“#toolbar”), {
  focusOut: function(args) {}
});
Not Applicable
overflowOpen Event: overflowOpen

var toolbar = new ej.Toolbar($(“#toolbar”), {
  overflowOpen: function(args) {}
});
Not Applicable
overflowClose Event: overflowClose

var toolbar = new ej.Toolbar($(“#toolbar”), {
  overflowClose: function(args) {}
});
Not Applicable