This article describes the API migration process of Toolbar component from Essential JS 1 to Essential JS 2.
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> |
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 |
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 |
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 |