Ej1 api migration in React Toolbar component

27 Feb 20238 minutes to read

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

Accessibility and Localization

|Behavior |Property in Essential JS 1 |Property in Essential JS 2 |
| ————– | —————————| ————————— |
|Localization | Not Applicable | Property : locale
<ToolbarComponent id='toolbar' locale='fr-BE'></ToolbarComponent> |
|Right to left | Property: enableRTL
<EJ.Toolbar id="toolbar" enableRTL={true}></EJ.Toolbar> | Property: enableRTL
<ToolbarComponent id='toolbar' enableRTL={true}> </ToolbarComponent> |

DataSource

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
|DataSource | Property : dataSource
<EJ.Toolbar id="toolbar" dataSource={this.items} ></EJ.Toolbar> | Not Applicable |
| Query | Property : query
<EJ.Toolbar id="toolbar" query={this.query}></EJ.Toolbar>| Not Applicable |
|Fields | Property: fields
<EJ.Toolbar id="toolbar" fields={this.fields}></EJ.Toolbar> | Not Applicable |
|Group | Property : group
<EJ.Toolbar id="toolbar" fields={this.fields}></EJ.Toolbar>

constructor(props: {}) {
this.fields = { group: ‘’ }; } | Not Applicable |
|HtmlAttributes | Property : htmlAttributes
<EJ.Toolbar id="toolbar" fields={this.fields}></EJ.Toolbar>

constructor(props: {}) {
this.fields = { htmlAttributes: { } };} | Not Applicable |
|Id | Property : id
<EJ.Toolbar id="toolbar" fields={this.fields}></EJ.Toolbar>

constructor(props: {}) {
this.fields = { id: ‘’ };} | Not Applicable |
|ImageAttributes | Property: imageAttributes
<EJ.Toolbar id="toolbar" fields={this.fields} ></EJ.Toolbar>

constructor(props: {}) {
this.fields = { imageAttributes: { } };}| Not Applicable |
|ImageUrl | Property: imageUrl
<EJ.Toolbar id="toolbar" fields={this.fields} ></EJ.Toolbar>

constructor(props: {}) {
this.fields = { imageUrl: ‘’ };} | Not Applicable |
|SpriteCssClass | Property: spriteCssClass
<EJ.Toolbar id="toolbar" fields={this.fields} ></EJ.Toolbar>

constructor(props: {}) {
this.fields = { spriteCssClass: ‘’ };}| Not Applicable |
|Text | Property: text
<EJ.Toolbar id="toolbar" fields={this.fields} ></EJ.Toolbar>

constructor(props: {}) {
this.fields = { text: ‘’ };}| Not Applicable |
|TooltipText | Property: tooltipText
<EJ.Toolbar id="toolbar" fields={this.fields} ></EJ.Toolbar>

constructor(props: {}) {
this.fields = { tooltipText: ‘’};} | Not Applicable |
|Template | Property: template
<EJ.Toolbar id="toolbar" fields={this.fields} ></EJ.Toolbar>

constructor(props: {}) {
this.fields = { template: ‘’ };} | Not Applicable |

Items

|Behavior |Property in Essential JS 1 |Property in Essential JS 2 |
| ———— | ————————- | ————————- |
|Default | <Property : items
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar> | Property : items
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent> |
|Align | Not Applicable | Property : items[0].Align
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { align: ‘center’};}|
|Custom class | Not Applicable | Property : items[0].cssClass
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { cssClass: ‘e-class’}; }|
|Group Name| Property : items[0].group
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { group: ‘’}; } | Not Applicable|
|HtmlAttributes | Property : items[0].htmlAttributes
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar> </EJ.Toolbar>

constructor(props: {}) {
this.items = { htmlAttributes: { } };}| Property : items[0].htmlAttributes
<ToolbarComponent id="toolbar" items={this.items}> </EJ.Toolbar> </ToolbarComponent>

constructor(props: {}) {
this.items = { htmlAttributes: { } };}|
|Id |Property : items[0].id
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { id: ‘’ }; }| Property : items[0].id
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { id: ‘’ }; }|
|ImageAttributes | Property : items[0].imageAttributes
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { imageAttributes: { } };} | Not Applicable|
|ImageUrl | Property : items[0].imageUrl
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { imageUrl: ‘’ };} | Not Applicable|
|Overflow | Not Applicable | Property : items[0].overflow
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { overflow: ‘popup’ }; }|
| PrefixIcon | Not Applicable | Property : items[0].prefixIcon
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { prefixIcon: ‘e-icon’ }; }|
|ShowAlwaysInPopup | Not Applicable | Property : items[0].showAlwaysInPopup
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { showAlwaysInPopup: true };}|
|ShowTextOn | Not Applicable | Property : items[0].showTextOn
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { showTextOn: ‘popup’ }; }|
|Sprite CssClass | Property : items[0].showTextOn
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { spriteCssClass: ‘e-class’ }; } |Not Applicable |
|SuffixIcon | Not Applicable | Property : items[0].suffixIcon
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { suffixIcon: ‘e-icon’ }; }|
|Template | Property : items[0].template
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { template: ‘’ }; } | Property : items[0].template
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { template: ‘’ }; } |
|Text | Property : items[0].text
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { text: ‘Cut’ }; } | Property : items[0].text
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { text: ‘Copy’ };} |
|TooltipText | Property : items[0].tooltipText
<EJ.Toolbar id="toolbar" items={this.items}> </EJ.Toolbar>

constructor(props: {}) {
this.items = { tooltipText: ‘Cut’ };} | Property : items[0].tooltipText
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = { tooltipText: ‘Copy’ }; } |
|Type | Not Applicable | Property : items[0].type
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = {type: ‘Button’}; } |
|Width | Not Applicable | Property : items[0].width
<ToolbarComponent id="toolbar" items={this.items}> </ToolbarComponent>

constructor(props: {}) {
this.items = {width: ‘50’}; }|
|Disable Items |Property : disabledItemIndices
<EJ.Toolbar id="toolbar" disabledItemIndices="[]" > </EJ.Toolbar>| Method : enableItems(items, false)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}} ></ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.enableItems([], false); }|
|Add Items |Not Applicable| Method :addItems(items, index)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}> </ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.addItems([], 0); } |
|Remove Item |Method : removeItem(element)
<EJ.Toolbar id="toolbar" ></EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.removeItem(ele);| Method :removeItems(args)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}> </ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.removeItems(0); }|
|RemoveItemById |Method :select(index)
<EJ.Toolbar id="toolbar" > </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.select(1);|Not Applicable|
| Enable item | Method :enableItem(element)
<EJ.Toolbar id="toolbar" > </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.enableItem(ele);| Method : enableItems(items, true)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}> </ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.enableItems(items, true); } |
|EnableItemById |Method : enableItemById(id)
<EJ.Toolbar id="toolbar" > </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.enableItemById(‘left’);|Not Applicable|
|Disable Item | Method : disableItem(element)
<EJ.Toolbar id="toolbar" > </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.disableItem(ele);| Method :enableItems(items, true)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}> </ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.enableItems([], false); }|
|DisableItemById |Method : disableItemById(id)
<EJ.Toolbar id="toolbar"> </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.disableItemById(‘left’);|Not Applicable|
|Show item |Not Applicable| Method : hideItem(index, false)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}> </ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.hideItem(0, false); }|
| Hide item |Not Applicable| Method : hideItem(index, true)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}r> </ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.hideItem(0, true); }|
|Select item | Method :selectItem(element)
<EJ.Toolbar id="toolbar" > </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.selectItem(ele);|Not Applicable|
|SelectItemById | Method : selectItemById(id)
<EJ.Toolbar id="toolbar" > </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.selectItemById(‘left’);|Not Applicable|
|DeselectItemById | Method : deselectItemById(id)
<EJ.Toolbar id="toolbar" > </EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.deselectItemById(‘left’);|Not Applicable|
|Clicked | Not Applicable | Event: clicked
<ToolbarComponent id="toolbar" clicked={onclicked.bind(this)}></ToolbarComponent>

onclicked(event){ } |
|itemHover | Event: itemHover
<EJ.Toolbar id='toolbar' itemHover={this.onitemHover}></EJ.Toolbar>

onitemHover(event){ } | Not Applicable |
|itemLeave | Event: itemLeave
<EJ.Toolbar id='toolbar' itemLeave={this.onitemLeave}></EJ.Toolbar>

onitemHover(event){ } | Not Applicable |

Common

|Behavior |Property in Essential JS 1 |Property in Essential JS 2 |
| ———— | ————————- | ————————- |
|Custom class | Property : cssClass
<EJ.Toolbar id="toolbar" cssClass="customClass" > </EJ.Toolbar>| Not Applicable |
|Enabled | Property : enabled
<EJ.Toolbar id="toolbar" enabled={false}> </EJ.Toolbar>| Not Applicable|
|EnableSeparator | Property : enableSeparator
<EJ.Toolbar id="Accordion" enableSeparator={false} > </EJ.Toolbar>| Not Applicable |
|Height | Property : height
<EJ.Toolbar id="toolbar" height="100%" > </EJ.Toolbar>| Property : height
<ToolbarComponent id="toolbar" height="100%" > </ToolbarComponent> |
|HtmlAttributes | Property : htmlAttributes
<EJ.Toolbar id="Accordion" htmlAttributes={this.attributes} > </EJ.Toolbar>

constructor(props: {}) {
this.attributes = {class: “my-class” };}| Not Applicable |
|Hide | Property : hide()
<EJ.Toolbar id="Accordion" hide={true}> </EJ.Toolbar> | Not Applicable |
|Orientation | Property : orientation
<EJ.Toolbar id="Accordion" orientation="horizontal" > </EJ.Toolbar>| Not Applicable |
|OverflowModes | Property : responsiveType
<EJ.Toolbar id="Accordion" responsiveType="popup" > </EJ.Toolbar>| Property : overflowMode
<ToolbarComponents id="Accordion" overflowMode="popup" > </ToolbarComponent> |
|Persistence |Not Applicable| Property : enablePersistence
<ToolbarComponent id="toolbar" enablePersistence={false} > </ToolbarComponent> |
|Responsive | Property : isResponsive
<EJ.Toolbar id="Accordion" isResponsive={true} > </EJ.Toolbar> |Not Applicable|
|ShowRounderCorner | Property : showRoundedCorner
<EJ.Toolbar id="toolbar" showRoundedCorner={true} > </EJ.Toolbar>| Not Applicable |
|Width | Property : width
<EJ.Toolbar id="Accordion" width="600" > </EJ.Toolbar>| Property : width
<ToolbarComponent id="Accordion" width="600" > </ToolbarComponent> |
|Enable | Method : enable()
<EJ.Toolbar id="toolbar" ></EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.enable(); | Method : disable(false)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}></ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.disable(false); |
|Disable | Method : disable()
<EJ.Toolbar id="toolbar" ></EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.disable(); | Method : disable(true)
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}} ></ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.disable(true); |
|Show | Method : show()
<EJ.Toolbar id="toolbar" ></EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.show(); | Not Applicable |
|Hide | Method : hide()
<EJ.Toolbar id="toolbar" ></EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.hide(); | Not Applicable |
|Refresh | Not Applicable | Method : refresh()
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}></ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.refresh(); |
|Destroy | Method : destroy()
<EJ.Toolbar id="toolbar" ></EJ.Toolbar>

var obj=$(‘#toolbar’).ejToolbar(‘instance’)
obj.destroy(); | Method : destroy()
<ToolbarComponent id="toolbar" ref = {(scope) => {this.ToolbarObj = scope}}></ToolbarComponent>

constructor(props: {}) {
this.ToolbarObj.destroy(); |
|BeforeCreate | Not Applicable | Event: created
<ToolbarComponent id="toolbar" created={onbeforeCreate.bind(this)}></ToolbarComponent>

onbeforeCreate(event) { } |
|Created | Event: create
<EJ.Toolbar id="toolbar" create={this.oncreate}></EJ.Toolbar>

oncreate(event) { } | Event: created
<ToolbarComponent id="toolbar" created={oncreated.bind(this)}></ToolbarComponent>

oncreated(event) { } |
|Destroyed | Event: destroy
<EJ.Toolbar id="toolbar" destroy={this.ondestroy}></EJ.Toolbar>

ondestroy(event) { } | Event: destroyed
<ToolbarComponent id="toolbar" destroyed={ondestroyed.bind(this)}></ToolbarComponent>

ondestroyed(event) { } |
|FocusOut | Event: focusOut
<EJ.Toolbar id="toolbar" focusOut={onfocusOut.bind(this)}></EJ.Toolbar>

onfocusOut(event) { } |Not Applicable |
|overflowOpen | Event: overflowOpen
<EJ.Toolbar id="toolbar" (overflowOpen)={this.onoverflowOpen}></EJ.Toolbar>

onoverflowOpen(event) { } |Not Applicable |
|overflowClose | Event: overflowClose
<EJ.Toolbar id="toolbar" (overflowClose)={this.onoverflowClose}></EJ.Toolbar>

onoverflowClose(event) { } | Not Applicable |