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