Migration from Essential JS 1

17 Feb 202214 minutes to read

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

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Localization Not Applicable Property: Locale

@Html.EJS().Toolbar(“ej2Toolbar”).Locale(“en-US”).Render()
RTL Property: EnableRTL

@Html.EJ().Toolbar(“ejToolbar”).EnableRTL(true)
Property: EnableRtl

@Html.EJS().Toolbar(“ej2Toolbar”).EnableRtl(true).Render()

DataSource

Behavior API in Essential JS 1 API in Essential JS 2
DataSource Property: DataSource

@Html.EJ().Toolbar(“ejToolbar”).DataSource(@ViewBag.items)
Not Applicable
Query Property: Query

@Html.EJ().Toolbar(“ejToolbar”).Query(“ej.Query().from(‘Orders’).take(6)”)
Not Applicable
Fields Property: Fields

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.Text(“”))
Not Applicable
Group Property: Group

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.Group(“”))
Not Applicable
HtmlAttributes Property: HtmlAttributes

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.HtmlAttributes(“”))
Not Applicable
Id Property: Id

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.Id(“”)).Render()
Not Applicable
ImageAttributes Property: ImageAttributes

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.ImageAttributes(“”))
Not Applicable
ImageUrl Property: ImageUrl

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.ImageUrl(“”))
Not Applicable
SpriteCssClass Property: SpriteCssClass

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.SpriteCssClass(“e-split”))
Not Applicable
Text Property: Text

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.Text(“Cut”))
Not Applicable
TooltipText Property: TooltipText

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.TooltipText(“Cut”))
Not Applicable
Template Property: Template

@Html.EJ().Toolbar(“ejToolbar”).ToolbarFields(f => f.Template(“”))
Not Applicable

Items

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: Items

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().Text(“Cut”);
})
Property: Items

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Text(“Cut”).Add();
}).Render()
Align Not Applicable Property: Items[0].Align

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Align(Syncfusion.EJ2.Navigationi.ItemAlign.Left).Add();
}).Render()
Custom Class Not Applicable Property: Items[0].CssClass

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.CssClass(“e-class”).Add();
}).Render()
Group Name Property: Items[0].Group

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().Group(“”);
})
Not Applicable
Html Attributes Property: Items[0].HtmlAttributes

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().HtmlAttributes(“”);
})
Property: Items[0].HtmlAttributes

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.HtmlAttributes(“”).Add();
}).Render()
Id Property: Items[0].Id

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().Id(“ej-toolbar”);
})
Property: Items[0].Id

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Id(“ej-toolbar”).Add();
}).Render()
ImageAttributes Property: Items[0].ImageAttributes

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().ImageAttributes(“”);
})
Not Applicable
ImageUrl Property: Items[0].ImageUrl

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().ImageUrl(“”);
})
Not Applicable
Overflow Not Applicable Property: Items[0].Overflow

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Overflow(Syncfusion.EJ2.Navigationi.OverflowOption.Show).Add();
}).Render()
PrefixIcon Not Applicable Property: Items[0].PrefixIcon

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.PrefixIcon(“e-icon”).Add();
}).Render()
ShowAlwaysInPopup Not Applicable Property: Items[0].ShowAlwaysInPopup

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.ShowAlwaysInPopup(true).Add();
}).Render()
ShowTextOn Not Applicable Property: Items[0].ShowTextOn

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.ShowTextOn(Syncfusion.EJ2.Navigationi.DisplayMode.Overflow).Add();
}).Render()
Sprite CssClass Property: Items[0].SpriteCssClass

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().SpriteCssClass(“e-split”);
})
Not Applicable
SuffixIcon Not Applicable Property: Items[0].SuffixIcon

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.SuffixIcon(“e-icon”).Add();
}).Render()
Template Property: Items[0].Template

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().Template(“”);
})
Property: Items[0].Template

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Template(“”).Add();
}).Render()
Text Property: Items[0].Text

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().Text(“Cut”);
})
Property: Items[0].Text

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Text(“Cut”).Add();
}).Render()
TooltipText Property: Items[0].TooltipText

@Html.EJ().Toolbar(“ejToolbar”).Items(i => {
  i.Add().TooltipText(“Cut”);
})
Property: Items[0].TooltipText

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.TooltipText(“Cut”).Add();
}).Render()
Type Not Applicable Property: Items[0].Type

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Type(Syncfusion.EJ2.Navigationi.ItemType.Button).Add();
}).Render()
Width Not Applicable Property: Items[0].Width

@Html.EJS().Toolbar(“ej2Toolbar”).Items(i => {
  i.Width(“50px”).Add();
}).Render()
Disable Items Property: DisabledItemIndices

@Html.EJ().Toolbar(“ejToolbar”).DisabledItemIndices(@{[0, 1]})
Method: enableItems(items, false)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.enableItems([], false);
Add Items Not Applicable Method: addItems(items, index)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.addItems([], 0);
RemoveItem Method: removeItem(element)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.removeItem(ele);
Method: removeItems(args)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.removeItems(0);
RemoveItemById Method: removeItemById(id)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.removeItemById(‘left’);
Not Applicable
Enable Item Method: enableItem(element)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.enableItem(ele);
Method: enableItems(items, true)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.enableItems(items, true);
EnableItemById Method: enableItemById(id)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.enableItemById(‘left’);
Not Applicable
Disable Item Method: disableItem(element)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.disableItem(ele);
Method: enableItems(items, false)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.enableItems([], false);
DisableItemById Method: disableItemById(id)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.disableItemById(‘left’);
Not Applicable
Show Item Not Applicable Method: hideItem(index, false)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.hideItem(0, false);
Hide Item Not Applicable Method: hideItem(index, true)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.hideItem(0, true);
SelectItem Method: selectItem(element)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.selectItem(ele);
Not Applicable
SelectItemById Method: selectItemById(id)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.selectItemById(‘left’);
Not Applicable
Deselect Item Method: deselectItem(element)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.deselectItem(ele);
Not Applicable
DeselectItemById Method: deselectItemById(id)

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.deselectItemById(‘left’);
Not Applicable
Clicked Not Applicable Event: Clicked

@Html.EJS().Toolbar(“ej2Toolbar”).Clicked(“onClicked”).Render()
itemHover Event: ItemHover

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.ItemHover(“itemHover”))
Not Applicable
itemLeave Event: ItemLeave

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.ItemLeave(“itemLeave”))
Not Applicable

Common

Behavior API in Essential JS 1 API in Essential JS 2
Custom class Property: CssClass

@Html.EJ().Toolbar(“ejToolbar”).CssClass(“customClass”)
Not Applicable
Enabled Property: Enabled

@Html.EJ().Toolbar(“ejToolbar”).Enabled(false)
Not Applicable
EnableSeparator Property: EnableSeparator

@Html.EJ().Toolbar(“ejToolbar”).EnableSeparator(true)
Not Applicable
Height Property: Height

@Html.EJ().Toolbar(“ejToolbar”).Height(“50px”)
Property: Height

@Html.EJS().Toolbar(“ej2Toolbar”).Height(“50px”).Render()
HtmlAttributes Property: HtmlAttributes

@Html.EJ().Toolbar(“ejToolbar”).HtmlAttributes(“”)
Not Applicable
Hide Property: Hide

@Html.EJ().Toolbar(“ejToolbar”).Hide(true)
Not Applicable
Orientation Property: Orientation

@Html.EJ().Toolbar(“ejToolbar”).Orientation(Orientation.Vertical)
Not Applicable
OverflowModes Property: ResponsiveType

@Html.EJ().Toolbar(“ejToolbar”).ResponsiveType(ResponsiveType.Popup)
Property: OverflowMode

@Html.EJS().Toolbar(“ej2Toolbar”).OverflowMode(Syncfusion.EJ2.Navigations.OverflowMode.Popup).Render()
Persistence Not Applicable Property: EnablePersistence

@Html.EJS().Toolbar(“ej2Toolbar”).EnablePersistence(true).Render()
Responsive Property: IsResponsive

@Html.EJ().Toolbar(“ejToolbar”).IsResponsive(true)
Not Applicable
ShowRounderCorner Property: ShowRoundedCorner

@Html.EJ().Toolbar(“ejToolbar”).ShowRoundedCorner(true)
Not Applicable
Width Property: Width

@Html.EJ().Toolbar(“ejToolbar”).Width(“400px”)
Property: Width

@Html.EJS().Toolbar(“ej2Toolbar”).Width(“400px”).Render()
Enable Method: enable()

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.enable();
Method: disable(false)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.disable(false);
Disable Method: disable()

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.disable();
Method: disable(true)

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.disable(true);
Show Method: show()

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.show();
Not Applicable
Hide Method: hide()

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.hide();
Not Applicable
Refresh Not Applicable Method: refresh()

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.refresh();
Destroy Method: destroy()

var toolbar = $(“#toolbar”).data(“ejToolbar”);
toolbar.destroy();
Method: destroy()

var toolbar = document.getElementById(‘ej2Toolbar’).ej2_instances[0];
toolbar.destroy();
Click Event: Click

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.Click(“onClick”))
Not Applicable
BeforeCreate Not Applicable Event: BeforeCreate

@Html.EJS().Toolbar(“ej2Toolbar”).BeforeCreate(“beforeCreate”).Render()
Created Event: Create

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.Create(“onCreate”))
Event: Created

@Html.EJS().Toolbar(“ej2Toolbar”).Created(“onCreated”).Render()
Destroyed Event: Destroy

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.Destroy(“onDestroy”))
Event: Destroyed

@Html.EJS().Toolbar(“ej2Toolbar”).Destroyed(“onDestroyed”).Render()
FocusOut Event: FocusOut

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.FocusOut(“focusOut”))
Not Applicable
OverflowOpen Event: OverflowOpen

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.OverflowOpen(“overflowOpen”))
Not Applicable
OverflowClose Event: OverflowClose

@Html.EJ().Toolbar(“ejToolbar”).ClientSideEvents(e => e.OverflowClose(“overflowClose”))
Not Applicable