Migration from Essential JS 1

17 Feb 202215 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

<ejs-toolbar locale="en-US" />
RTL Property: enable-rtl

<ej-toolbar enable-rtl="true" />
Property: enableRtl

<ejs-toolbar enableRtl="true" />

DataSource

Behavior API in Essential JS 1 API in Essential JS 2
DataSource Property: data-source

<ej-toolbar data-source="@ViewBag.items" />
Not Applicable
Query Property: query

<ej-toolbar query="query" />
Not Applicable
Fields Property: fields

<ej-toolbar>
  <e-toolbar-fields />
</ej-toolbar>
Not Applicable
Group Property: group

<ej-toolbar>
  <e-toolbar-fields group="" />
</ej-toolbar>
Not Applicable
HtmlAttributes Property: html-attributes

<ej-toolbar>
  <e-toolbar-fields html-attributes="" />
</ej-toolbar>
Not Applicable
Id Property: id

<ej-toolbar>
  <e-toolbar-fields id="tbField" />
</ej-toolbar>
Not Applicable
ImageAttributes Property: image-attributes

<ej-toolbar>
  <e-toolbar-fields image-attributes="" />
</ej-toolbar>
Not Applicable
ImageUrl Property: image-url

<ej-toolbar>
  <e-toolbar-fields image-url="" />
</ej-toolbar>
Not Applicable
SpriteCssClass Property: sprite-css-class

<ej-toolbar>
  <e-toolbar-fields sprite-css-class="e-split" />
</ej-toolbar>
Not Applicable
Text Property: text

<ej-toolbar>
  <e-toolbar-fields text="Cut" />
</ej-toolbar>
Not Applicable
TooltipText Property: tooltip-text

<ej-toolbar>
  <e-toolbar-fields tooltip-text="Cut" />
</ej-toolbar>
Not Applicable
Template Property: template

<ej-toolbar>
  <e-toolbar-fields template="" />
</ej-toolbar>
Not Applicable

Items

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

<ej-toolbar>
  <e-toolbar-items />
</ej-toolbar>
Property: items

<ejs-toolbar>
  <e-toolbar-items />
</ejs-toolbar>
Align Not Applicable Property: items[0].align

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item align="left" />
  </e-toolbar-items>
</ejs-toolbar>
Custom Class Not Applicable Property: items[0].cssClass

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item cssClass="e-custom-class" />
  </e-toolbar-items>
</ejs-toolbar>
Group Name Property: items[0].group

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item group="" />
  </e-toolbar-items>
</ej-toolbar>
Not Applicable
Html Attributes Property: items[0].html-attributes

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item html-attributes="" />
  </e-toolbar-items>
</ej-toolbar>
Property: items[0].htmlAttributes

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item htmlAttributes="ViewBag.attributes" />
  </e-toolbar-items>
</ejs-toolbar>
Id Property: items[0].id

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item id="item1" />
  </e-toolbar-items>
</ej-toolbar>
Property: items[0].id

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item id="item1" />
  </e-toolbar-items>
</ejs-toolbar>
ImageAttributes Property: items[0].image-attributes

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item image-attributes="" />
  </e-toolbar-items>
</ej-toolbar>
Not Applicable
ImageUrl Property: items[0].image-url

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item image-url="" />
  </e-toolbar-items>
</ej-toolbar>
Not Applicable
Overflow Not Applicable Property: items[0].overflow

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item overflow="popup" />
  </e-toolbar-items>
</ejs-toolbar>
PrefixIcon Not Applicable Property: items[0].prefixIcon

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item prefixIcon="e-icon" />
  </e-toolbar-items>
</ejs-toolbar>
ShowAlwaysInPopup Not Applicable Property: items[0].showAlwaysInPopup

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item showAlwaysInPopup="true" />
  </e-toolbar-items>
</ejs-toolbar>
ShowTextOn Not Applicable Property: items[0].showTextOn

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item showTextOn="popup" />
  </e-toolbar-items>
</ejs-toolbar>
Sprite CssClass Property: items[0].sprite-css-class

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item sprite-css-class="e-class" />
  </e-toolbar-items>
</ej-toolbar>
Not Applicable
SuffixIcon Not Applicable Property: items[0].suffixIcon

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item suffixIcon="e-icon" />
  </e-toolbar-items>
</ejs-toolbar>
Template Property: items[0].template

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item template="" />
  </e-toolbar-items>
</ej-toolbar>
Property: items[0].template

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item template="" />
  </e-toolbar-items>
</ejs-toolbar>
Text Property: items[0].text

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item text="Cut" />
  </e-toolbar-items>
</ej-toolbar>
Property: items[0].text

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item text="cut" />
  </e-toolbar-items>
</ejs-toolbar>
TooltipText Property: items[0].tooltip-text

<ej-toolbar>
  <e-toolbar-items>
   <e-toolbar-item tooltip-text="Cut" />
  </e-toolbar-items>
</ej-toolbar>
Property: items[0].tooltipText

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item tooltipText="Cut" />
  </e-toolbar-items>
</ejs-toolbar>
Type Not Applicable Property: items[0].type

<ejs-toolbar>
  <e-toolbar-items>
   <e-toolbar-item type="Button" />
  </e-toolbar-items>
</ejs-toolbar>
Width Not Applicable Property: items[0].width

<ejs-toolbar>
  <e-toolbar-items>
    <e-toolbar-item width="50" />
  </e-toolbar-items>
</ejs-toolbar>
Disable Items Property: disabled-item-indices

<ej-toolbar disabled-item-indices="" />
Method: enableItems(items, false)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.enableItems([], false);
Add Items Not Applicable Method: addItems(items, index)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.addItems([], 0);
RemoveItem Method: removeItem(element)

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.removeItems(0);
RemoveItemById Method: removeItemById(id)

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

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.enableItems(items, true);
EnableItemById Method: enableItemById(id)

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

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.enableItems([], false);
DisableItemById Method: disableItemById(id)

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.hideItem(0, false);
Hide Item Not Applicable Method: hideItem(index, true)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.hideItem(0, true);
SelectItem Method: selectItem(element)

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

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

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

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

<ejs-toolbar clicked="onClicked" />
itemHover Event: item-hover

<ej-toolbar item-hover="onItemHover" />
Not Applicable
itemLeave Event: item-leave

<ej-toolbar item-leave="onItemLeave" />
Not Applicable

Common

Behavior API in Essential JS 1 API in Essential JS 2
Custom class Property: css-class

<ej-toolbar css-class="customClass" />
Not Applicable
Enabled Property: enabled

<ej-toolbar enabled="false" />
Not Applicable
EnableSeparator Property: enable-separator

<ej-toolbar enable-separator="false" />
Not Applicable
Height Property: height

<ej-toolbar height="400" />
Property: height

<ejs-toolbar height="70" />
HtmlAttributes Property: html-attributes

<ej-toolbar html-attributes="" />
Not Applicable
Hide Property: hide

<ej-toolbar hide="true" />
Not Applicable
Orientation Property: orientation

<ej-toolbar orientation="Horizontal" />
Not Applicable
OverflowModes Property: responsive-type

<ej-toolbar responsive-type="popup" />
Property: overflowMode

<ejs-toolbar overflowMode="Popup" />
Persistence Not Applicable Property: enablePersistence

<ejs-toolbar enablePersistence="true" />
Responsive Property: is-responsive

<ej-toolbar is-responsive="true" />
Not Applicable
ShowRounderCorner Property: show-rounded-corner

<ej-toolbar show-rounded-corner="false" />
Not Applicable
Width Property: width

<ej-toolbar width="600" />
Property: width

<ejs-toolbar width="500" />
Enable Method: enable()

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.disable(false);
Disable Method: disable()

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.disable(true);
Show Method: show()

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

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.refresh();
Destroy Method: destroy()

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

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.destroy();
Click Event: click

<ej-toolbar click="onClick" />
Not Applicable
BeforeCreate Not Applicable Event: beforeCreate

<ejs-toolbar beforeCreate="onBeforeCreate" />
Created Event: create

<ej-toolbar create="onCreate" />
Event: created

<ejs-toolbar created="onCreated" />
Destroyed Event: destroy

<ej-toolbar destroy="onDestroy" />
Event: destroyed

<ejs-toolbar destroyed="onDestroyed" />
FocusOut Event: focus-out

<ej-toolbar focus-out="onFocusOut" />
Not Applicable
overflowOpen Event: overflow-open

<ej-toolbar overflow-open="onOverflowOpen" />
Not Applicable
overflowClose Event: overflow-close

<ej-toolbar overflow-close="onOverflowClose" />
Not Applicable