Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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<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> |
| 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 |
| 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 |
| 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 |