React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in React Toolbar component

24 Jun 2022 / 9 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
Previous
Next