Search results

Migration from Essential JS 1

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
<ejs-toolbar id='toolbar' locale='fr-BE'></ejs-toolbar>
Right to left Property: enableRTL
<ej-toolbar id="toolbar" [enableRTL]="true"></ej-toolbar>
Property: enableRTL
<ejs-toolbar id='toolbar' [enableRTL]='true'> </ejs-toolbar>

DataSource

Behavior Property in Essential JS 1 Property in Essential JS 2
DataSource Property : dataSource
<ej-toolbar id="toolbar" [dataSource]="items" ></ej-toolbar>
Not Applicable
Query Property : query
<ej-toolbar id="toolbar" [query]="query"></ej-toolbar>
Not Applicable
Fields Property: fields
<ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>
Not Applicable
Group Property : group
<ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>
TS:
public fields: Object = { group: ” }
Not Applicable
HtmlAttributes Property : htmlAttributes
<ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>
TS:
public fields: Object = { htmlAttributes: { } }
Not Applicable
Id Property : id
<ej-toolbar id="toolbar" [fields]="fields"></ej-toolbar>
TS:
public fields: Object = { id: ” }
Not Applicable
ImageAttributes Property: imageAttributes
<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>
TS:
public fields: Object = { imageAttributes: { } }
Not Applicable
ImageUrl Property: imageUrl
<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>
TS:
public fields: Object = { imageUrl: ”}
Not Applicable
SpriteCssClass Property: spriteCssClass
<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>
TS:
public fields: Object = { spriteCssClass: ”}
Not Applicable
Text Property: text
<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>
TS:
public fields: Object = { text: ”}
Not Applicable
TooltipText Property: tooltipText
<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>
TS:
public fields: Object = { tooltipText: ”}
Not Applicable
Template Property: template
<ej-toolbar id="toolbar" [fields]="fields" ></ej-toolbar>
TS:
public fields: Object = { template: ”}
Not Applicable

Items

Behavior Property in Essential JS 1 Property in Essential JS 2
Default <Property : items
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
Property : items
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
Align Not Applicable Property : items[0].Align
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ align: ‘center’}];
Custom class Not Applicable Property : items[0].cssClass
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ cssClass: ‘e-class’}];
Group Name Property : items[0].group
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ group: ”}];
Not Applicable
HtmlAttributes Property : items[0].htmlAttributes
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar> </ej-toolbar>
TS:
public items: Object[] = [{ htmlAttributes: { } }];
Property : items[0].htmlAttributes
<ejs-toolbar id="toolbar" [items]="items"> </ej-toolbar> </ejs-toolbar>
TS:
public items: Object[] = [{ htmlAttributes: { } }];
Id Property : items[0].id
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ id: ” }];
Property : items[0].id
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ id: ” }];
ImageAttributes Property : items[0].imageAttributes
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ imageAttributes: { } }];
Not Applicable
ImageUrl Property : items[0].imageUrl
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ imageUrl: ” }];
Not Applicable
Overflow Not Applicable Property : items[0].overflow
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ overflow: ‘popup’ }];
PrefixIcon Not Applicable Property : items[0].prefixIcon
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ prefixIcon: ‘e-icon’ }];
ShowAlwaysInPopup Not Applicable Property : items[0].showAlwaysInPopup
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ showAlwaysInPopup: true }];
ShowTextOn Not Applicable Property : items[0].showTextOn
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ showTextOn: ‘popup’ }];
Sprite CssClass Property : items[0].showTextOn
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ spriteCssClass: ‘e-class’ }];
Not Applicable
SuffixIcon Not Applicable Property : items[0].suffixIcon
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ suffixIcon: ‘e-icon’ }];
Template Property : items[0].template
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ template: ” }];
Property : items[0].template
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ template: ” }];
Text Property : items[0].text
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ text: ‘Cut’ }];
Property : items[0].text
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ text: ‘Copy’ }];
TooltipText Property : items[0].tooltipText
<ej-toolbar id="toolbar" [items]="items"> </ej-toolbar>
TS:
public items: Object[] = [{ tooltipText: ‘Cut’ }];
Property : items[0].tooltipText
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{ tooltipText: ‘Copy’ }];
Type Not Applicable Property : items[0].type
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{type: ‘Button’}];
Width Not Applicable Property : items[0].width
<ejs-toolbar id="toolbar" [items]="items"> </ejs-toolbar>
TS:
public items: Object[] = [{width: ‘50’}];
Disable Items Property : disabledItemIndices
<ej-toolbar id="toolbar" disabledItemIndices="[]" > </ej-toolbar>
Method : enableItems(items, false)
<ejs-toolbar id="toolbar" #Toolbar ></ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.enableItems([], false);
Add Items Not Applicable Method :addItems(items, index)
<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.addItems([], 0);
Remove Item Method : removeItem(element)
<ej-toolbar id="toolbar" #Toolbar></ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.removeItem(ele);
Method :removeItems(args)
<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.removeItems(0);
RemoveItemById Method :select(index)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.select(1);
Not Applicable
Enable item Method :enableItem(element)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.enableItem(ele);
Method : enableItems(items, true)
<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.enableItems(items, true);
EnableItemById Method : enableItemById(id)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.enableItemById(‘left’);
Not Applicable
Disable Item Method : disableItem(element)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.disableItem(ele);
Method :enableItems(items, true)
<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.enableItems([], false);
DisableItemById Method : disableItemById(id)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.disableItemById(‘left’);
Not Applicable
Show item Not Applicable Method : hideItem(index, false)
<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.hideItem(0, false);
Hide item Not Applicable Method : hideItem(index, true)
<ejs-toolbar id="toolbar" #Toolbar> </ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.hideItem(0, true);
Select item Method :selectItem(element)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.selectItem(ele);
Not Applicable
SelectItemById Method : selectItemById(id)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.selectItemById(‘left’);
Not Applicable
DeselectItemById Method : deselectItemById(id)
<ej-toolbar id="toolbar" #Toolbar> </ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.deselectItemById(‘left’);
Not Applicable
Clicked Not Applicable Event: clicked
<ejs-toolbar id="toolbar" (clicked)='onclicked($event)'></ejs-toolbar>
TS:
onclicked(event){ }
itemHover Event: itemHover
<ej-toolbar id='toolbar' (itemHover)='onitemHover($event)'></ej-toolbar>
TS:
onitemHover(event){ }
Not Applicable
itemLeave Event: itemLeave
<ej-toolbar id='toolbar' (itemLeave)='onitemLeave($event)'></ej-toolbar>
TS:
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
<ejs-toolbar id="toolbar" height="100%" > </ejs-toolbar>
HtmlAttributes Property : htmlAttributes
<ej-toolbar id="Accordion" [htmlAttributes]="attributes" > </ej-toolbar>
TS:
public attributes: Object = {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
<ejs-toolbars id="Accordion" [overflowMode]="popup" > </ejs-toolbar>
Persistence Not Applicable Property : enablePersistence
<ejs-toolbar id="toolbar" [enablePersistence]="false" > </ejs-toolbar>
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
<ejs-toolbar id="Accordion" [width]="600" > </ejs-toolbar>
Enable Method : enable()
<ej-toolbar id="toolbar" #Toolbar></ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.enable();
Method : disable(false)
<ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.disable(false);
Disable Method : disable()
<ej-toolbar id="toolbar" #Toolbar></ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.disable();
Method : disable(true)
<ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.disable(true);
Show Method : show()
<ej-toolbar id="toolbar" #Toolbar></ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.show();
Not Applicable
Hide Method : hide()
<ej-toolbar id="toolbar" #Toolbar></ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.hide();
Not Applicable
Refresh Not Applicable Method : refresh()
<ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.refresh();
Destroy Method : destroy()
<ej-toolbar id="toolbar" #Toolbar></ej-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.destroy();
Method : destroy()
<ejs-toolbar id="toolbar" #Toolbar></ejs-toolbar>
TS:
@ViewChild(‘Toolbar’) public ToolObj: ToolbarComponent;
ToolObj.destroy();
BeforeCreate Not Applicable Event: created
<ejs-toolbar id="toolbar" #Toolbar (created)='onbeforeCreate($event)'></ejs-toolbar>
TS:
onbeforeCreate(event) { }
Created Event: create
<ej-toolbar id="toolbar" #Toolbar (create)='oncreate($event)'></ej-toolbar>
TS:
oncreate(event) { }
Event: created
<ejs-toolbar id="toolbar" #Toolbar (created)='oncreated($event)'></ejs-toolbar>
TS:
oncreated(event) { }
Destroyed Event: destroy
<ej-toolbar id="toolbar" #Toolbar (destroy)='ondestroy($event)'></ej-toolbar>
TS:
ondestroy(event) { }
Event: destroyed
<ejs-toolbar id="toolbar" #Toolbar (destroyed)='ondestroyed($event)'></ejs-toolbar>
TS:
ondestroyed(event) { }
FocusOut Event: focusOut
<ej-toolbar id="toolbar" #Toolbar (focusOut)='onfocusOut($event)'></ej-toolbar>
TS:
onfocusOut(event) { }
Not Applicable
overflowOpen Event: overflowOpen
<ej-toolbar id="toolbar" (overflowOpen)='onoverflowOpen($event)'></ej-toolbar>
TS:
onoverflowOpen(event) { }
Not Applicable
overflowClose Event: overflowClose
<ej-toolbar id="toolbar" (overflowClose)='onoverflowClose($event)'></ej-toolbar>
TS:
onoverflowClose(event) { }
Not Applicable