Ej1 api migration in EJ2 JavaScript Toolbar control

2 May 202317 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

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

$(“#toolbar”).ejToolbar({
  enableRTL: true
});
Property: enableRtl

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

DataSource

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

$(“#toolbar”).ejToolbar({
  dataSource: items
});
Not Applicable
Query Property: query

$(“#toolbar”).ejToolbar({
  query: query
});
Not Applicable
Fields Property: fields

$(“#toolbar”).ejToolbar({
  fields: {}
});
Not Applicable
Group Property: group

$(“#toolbar”).ejToolbar({
  fields: { group: ‘’ }
});
Not Applicable
HtmlAttributes Property: htmlAttributes

$(“#toolbar”).ejToolbar({
  fields: { htmlAttributes: {} }
});
Not Applicable
Id Property: id

$(“#toolbar”).ejToolbar({
  fields: { id: ‘’ }
});
Not Applicable
ImageAttributes Property: imageAttributes

$(“#toolbar”).ejToolbar({
  fields: { imageAttributes: {} }
});
Not Applicable
ImageUrl Property: imageUrl

$(“#toolbar”).ejToolbar({
  fields: { imageUrl: ‘’ }
});
Not Applicable
SpriteCssClass Property: spriteCssClass

$(“#toolbar”).ejToolbar({
  fields: { spriteCssClass: ‘’ }
});
Not Applicable
Text Property: text

$(“#toolbar”).ejToolbar({
  fields: { text: ‘’ }
});
Not Applicable
TooltipText Property: tooltipText

$(“#toolbar”).ejToolbar({
  fields: { tooltipText: ‘’ }
});
Not Applicable
Template Property: template

$(“#toolbar”).ejToolbar({
  fields: { template: ‘’ }
});
Not Applicable

Items

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

$(“#toolbar”).ejToolbar({
  items: []
});
Property: items

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

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

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

$(“#toolbar”).ejToolbar({
  items: [{ group: ‘’ }]
});
Not Applicable
Html Attributes Property: items[0].htmlAttributes

$(“#toolbar”).ejToolbar({
  items: [{ htmlAttributes: {} }]
});
Property: items[0].htmlAttributes

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

$(“#toolbar”).ejToolbar({
  items: [{ id: ‘’ }]
});
Property: items[0].id

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

$(“#toolbar”).ejToolbar({
  items: [{ imageAttributes: {} }]
});
Not Applicable
ImageUrl Property: items[0].imageUrl

$(“#toolbar”).ejToolbar({
  items: [{ imageUrl: ‘’ }]
});
Not Applicable
Overflow Not Applicable Property: items[0].overflow

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

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

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

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

$(“#toolbar”).ejToolbar({
  items: [{ spriteCssClass: ‘e-class’ }]
});
Not Applicable
SuffixIcon Not Applicable Property: items[0].suffixIcon

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

$(“#toolbar”).ejToolbar({
  items: [{ template: ‘’ }]
});
Property: items[0].template

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

$(“#toolbar”).ejToolbar({
  items: [{ text: ‘Cut’ }]
});
Property: items[0].text

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

$(“#toolbar”).ejToolbar({
  items: [{ tooltipText: ‘Cut’ }]
});
Property: items[0].tooltipText

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

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

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

$(“#toolbar”).ejToolbar({
  disabledItemIndices: []
});
Method: enableItems(items, false)

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

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.removeItem(ele);
Method: removeItems(args)

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.removeItemById(‘left’);
Not Applicable
Enable Item Method: enableItem(element)

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.enableItem(ele);
Method: enableItems(items, true)

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.enableItemById(‘left’);
Not Applicable
Disable Item Method: disableItem(element)

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.disableItem(ele);
Method: enableItems(items, false)

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.disableItemById(‘left’);
Not Applicable
Show Item Not Applicable Method: hideItem(index, false)

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

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.selectItem(ele);
Not Applicable
SelectItemById Method: selectItemById(id)

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.selectItemById(‘left’);
Not Applicable
Deselect Item Method: deselectItem(element)

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.deselectItem(ele);
Not Applicable
DeselectItemById Method: deselectItemById(id)

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.deselectItemById(‘left’);
Not Applicable
Clicked Not Applicable Event: clicked

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

$(“#toolbar”).ejToolbar({
  itemHover: function(args) {}
});
Not Applicable
itemLeave Event: itemLeave

$(“#toolbar”).ejToolbar({
  itemLeave: function(args) {}
});
Not Applicable

Common

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

$(“#toolbar”).ejToolbar({
  cssClass: ‘customClass’
});
Not Applicable
Enabled Property: enabled

$(“#toolbar”).ejToolbar({
  enabled: false
});
Not Applicable
EnableSeparator Property: enableSeparator

$(“#toolbar”).ejToolbar({
  enableSeparator: false
});
Not Applicable
Height Property: height

$(“#toolbar”).ejToolbar({
  height: 400
});
Property: height

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

$(“#toolbar”).ejToolbar({
  htmlAttributes: {}
});
Not Applicable
Hide Property: hide

$(“#toolbar”).ejToolbar({
  hide: true
});
Not Applicable
Orientation Property: orientation

$(“#toolbar”).ejToolbar({
  orientation: ej.Orientation.Horizontal
});
Not Applicable
OverflowModes Property: responsiveType

$(“#toolbar”).ejToolbar({
  responsiveType: ‘popup’
});
Property: overflowMode

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

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

$(“#toolbar”).ejToolbar({
  isResponsive: true
});
Not Applicable
ShowRounderCorner Property: showRoundedCorner

$(“#toolbar”).ejToolbar({
  showRoundedCorner: false
});
Not Applicable
Width Property: width

$(“#toolbar”).ejToolbar({
  width: 600
});
Property: width

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.enable();
Method: disable(false)

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.disable();
Method: disable(true)

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.show();
Not Applicable
Hide Method: hide()

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.hide();
Not Applicable
Refresh Not Applicable Method: refresh()

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

$(“#toolbar”).ejToolbar();
var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.destroy();
Method: destroy()

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

$(“#toolbar”).ejToolbar({
  click: function(args) {}
});
Not Applicable
BeforeCreate Not Applicable Event: beforeCreate

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

$(“#toolbar”).ejToolbar({
  create: function(args) {}
});
Event: created

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

$(“#toolbar”).ejToolbar({
  destroy: function(args) {}
});
Event: destroyed

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

$(“#toolbar”).ejToolbar({
  focusOut: function(args) {}
});
Not Applicable
overflowOpen Event: overflowOpen

$(“#toolbar”).ejToolbar({
  overflowOpen: function(args) {}
});
Not Applicable
overflowClose Event: overflowClose

$(“#toolbar”).ejToolbar({
  overflowClose: function(args) {}
});
Not Applicable