Migration from Essential JS 1

17 Feb 20227 minutes to read

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

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding custom class Property: cssClass

@{Html.EJ().Splitter(“splitter”)
.CssClass(“customClass”)
.Render();}
Property: cssClass

@Html.EJS().Splitter(“splitter”)
.CssClass(“customClass”)
.Render();
Adjusting Height Property: height

@{Html.EJ().Splitter(“splitter”)
.Height(“100%”).Render();}
Property: height

@Html.EJS().Splitter(“splitter”)
.Height(“100%”).Render();
Adjusting Width Property: width

@{Html.EJ().Splitter(“splitter”)
.Width(“600”).Render();}
 Property: width

@Html.EJS().Splitter(“splitter”)
.Width(“100%”).Render();
Orientation Property: orientation

@{Html.EJ().Splitter(“splitter”)
.Orientation(Orientation.Vertical)
.Render();}
 Property: orientation

@Html.EJS().Splitter(“splitter”)
.Orientation
(Syncfusion.EJ2.Layouts
.Orientation.Vertical)
.Render();
Separator Size Not Available Property: separatorSize

@Html.EJS().Splitter(“splitter”)
.SeparatorSize(4).Render();
Adding HTML attributes Property: *htmlAttributes*

@{
IDictionary<string, object>
htmlAttribute = new Dictionary
<string, object>();
htmlAttribute.Add(“class”,
“my-class”)
}

@{Html.EJ().Splitter(“splitter”)
.HtmlAttributes(htmlAttribute)
.Render();}
 Not Available
Customize expand/collapse icons Property:
expanderTemplate

@{Html.EJ().Splitter(“splitter”)
.ExpanderTemplate(
<img class=”eimg”
src=”expander.png”
alt=”employee”/>).Render();}
 Not Available
Make control flexible for mobile view Property: isResponsive

@{Html.EJ().Splitter(“splitter”)
.IsResponsive(true).Render();}
 By default, Splitter works with mobile mode.
Refresh the Splitter Method: refresh()

@{Html.EJ().Splitter(“splitter”)
.Render();}
$(“#splitter”).ejSplitter(“refresh”)
 Method: refresh()

@Html.EJS().Splitter(“splitter”)
.Render();
$(“#splitter”).ejSplitter(“refresh”);
Destroy the Control Method: destroy()

@{Html.EJ()
.Splitter(“splitter”)
.Render();}
$(“#splitter”).ejSplitter(“destroy”)
 Method: destroy()

@Html.EJS().Splitter(“splitter”)
.Render();
$(“#splitter”).ejSplitter(“destroy”);
Event triggers after the Splitter created successfully Event: create

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>
e.Create(“onCreate”))
.Render();}
function onCreate(args) {}
 Event: created

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.Create(“onCreate”)).Render();
function onCreate(args) { }
Event triggers when Splitter has been destroyed Event: destroy

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>
e.Destroy(“onDestroy”))
.Render();}
function onDestroy(args) {}
}); 		Not Available

Accessibility and Localization

Behavior API in Essential JS 1 API in Essential JS 2
Keyboard Navigation Property: allowKeyboardNavigation

@{Html.EJ().Splitter(“splitter”)
.AllowKeyboardNavigation(true)
.Render();}
No separate property for enable/disable keyboard navigation. Its enabled by default.
Right to Left Property: enableRTL

@{Html.EJ().Splitter(“splitter”)
.EnableRTL(false).Render();}
 Property: enableRtl

@Html.EJS().Splitter(“splitter”)
.EnableRtl(true).Render();

Control State

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the control Not Available Property: enabled

@Html.EJS().Splitter(“splitter”)
.Enabled(true).Render();

State Maintenance

Behavior API in Essential JS 1 API in Essential JS 2
Save the model value in local storage or cookies Not Available Property: enablePersistence

@Html.EJS().Splitter(“splitter”)
.EnablePersistence(true).Render();

Pane Properties

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

@{Html.EJ().Splitter(“splitter”)
.PaneProperties().Render();}
 Property: paneSettings

@Html.EJS().Splitter(“splitter”)
.PaneSettings().Render();
Pane Content Not Available Property: content

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Content(”<div>First Pane Content</div>”)})
.Render();
Change the size of the pane Property: paneSize

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>
{p.Add().PaneSize(“30px”)})
.Render();}
 Property: size

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>
{item.Size(”25%”)})
.Render();
Minimum pane size Property: minSize

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>{p.Add()
.MinSize(30)})
.Render();}
 Property: min

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>
{item.Min(”60px”)})
.Render();
Maximum pane size Property: maxSize

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>
{p.Add().MaxSize(30)})
.Render();}
 Property: max

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>
{item.Max(”60px”)})
.Render();
Enable/Disable the Pane Resizable behavior Property: resizable

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>
{p.Add().Resizable(false)})
.Render();}
 Property: resizable

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>
{item.Resizable(false)})
.Render();
Collapsible Property: collapsible

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p
=>{p.Add().Collapsible(true)})
.Render();}
 Property: collapsible

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>
{item.Collapsible(true)})
.Render();
Expandable Property: expandable

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>
{p.Add().Expandable(true)})
.Render();}
 Not Available
Collapsed Not Available Property: collapsed

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>
{item.Collapsed(true)})
.Render();
Add Pane Method: addItem()

@{Html.EJ().Splitter(“splitter”)
.Render();}
$(“#splitter”).ejSplitter
(“addItem”, “New Pane 0”,
{paneSize:20, minSize:20,
maxSize: 100}, 0);
 Method: addPane()

@Html.EJS().Splitter(“splitter”)
.Render();
$(“#splitter”).ejSplitter
(“addPane”, “New Pane 0”,
{ size: “25%”,
content: “Pane”}, 0);
Remove Pane Method: removeItem()

@{Html.EJ()
.Splitter(“splitter”)
.Render();}
$(“#splitter”).ejSplitter
(“removeItem”, 0);
 Method: removePane()

@Html.EJS().Splitter(“splitter”)
.Render();
$(“#splitter”)
.ejSplitter(“removePane”, 0);
Collapse Pane Method: collapse()

@{Html.EJ().Splitter(“splitter”)
.Render();}
$(“#splitter”)
.ejSplitter(“collapse”, 0);
 Method: collapse()

@Html.EJS().Splitter(“splitter”)
.Render();
$(“#splitter”)
.ejSplitter(“collapse”, 0);
Expand Pane Method: expand()

@{Html.EJ().Splitter(“splitter”)
.Render();}
$(“#splitter”)
.ejSplitter(“expand”, 0);
 Method: expand()

@Html.EJS().Splitter(“splitter”)
.Render();
$(“#splitter”).ejSplitter
(“expand”, 0);
Event triggers when before panes get expanded/collapsed Event: beforeExpandCollapse

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>
e.BeforeExpandCollapse
(“onBeforeExpandCollapse”))
.Render();}
function
onBeforeExpandCollapse (args)
{}
 Event: beforeExpand

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.BeforeExpand(“onBeforeExpand”))
.Render();
function onBeforeExpand(args) {}
Event: beforeCollapse
@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.BeforeCollapse(“onBeforeCollapse”))
.Render();
function onBeforeCollapse(args) {}
Event triggers when after panes get expanded/collapsed Event: expandCollapse

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>
e.ExpandCollapse
(“onExpandCollapse”))
.Render();}
function onExpandCollapse (args) {}
 Event: expand

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.Expand(“onExpand”))
.Render();
function onExpand(args) {}
Event: collapse
@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.Collapse(“onCollapse”))
.Render();
function onCollapse(args) {}
Event triggers when Resizing the pane Event: resize

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>
e.Resize(“onResize”))
.Render();}
function onResize (args) {}
 Event: resizing

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.Resizing(“onResizing”))
.Render();
function onResizing(args) {}
Event triggers when pane is started to resize Not Available Event: resizeStart

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.ResizeStart(“onResizeStart”))
.Render();
function onResizeStart(args) {}
Event triggers when pane is stopped to resize Not Available Event: resizeStop

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>
e.ResizeStop(“onResizeStop”))
.Render();
function onResizeStop(args) {}
Event triggers when click template icon Event: clickOnExpander

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>e
.ClickOnExpander
(“onClickOnExpander”))
.Render();}
function clickOnExpander (args) {}
 Not Available

Animation

Behavior API in Essential JS 1 API in Essential JS 2
EnableAnimation Property: enableAnimation

@{Html.EJ().Splitter(“splitter”)
.EnableAnimation(true)
.Render();}
 Not Available
AnimationSpeed Property: animationSpeed

@{Html.EJ().Splitter(“splitter”)
.AnimationSpeed(150)
.Render();}
 Not Available