Migration from Essential JS 1

17 Feb 20228 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

<ej-Splitter id=”splitter” css-class=”customClass”></ej-Splitter>
 Property: cssClass

<ejs-splitter id=”splitter” css-class=”customClass”></ejs-splitter>
Adjusting Height Property: height

<ej-Splitter id=”splitter” height=”100%”></ej-Splitter>
 Property: height

<ejs-splitter id=”splitter” height=”100%”></ejs-splitter>
Adjusting Width Property: width

<ej-Splitter id=”splitter” width=”600”></ej-Splitter>
 Property: width
<ejs-splitter id=”splitter” width=”100%”></ejs-splitter>
Orientation Property: orientation
<ej-Splitter id=”splitter” orientation=”@Orientation.Vertical”></ej-Splitter>
 Property: orientation
<ejs-splitter id=”splitter” orientation=”Vertical”></ejs-splitter>
Separator Size Not Available Property: separatorSize
<ejs-splitter id=”splitter” separatorSize=”4”></ejs-splitter>
Adding HTML attributes Property: htmlAttributes

@{IDictionary
<string, object> htmlAttribute =
new Dictionary<string, object>();
htmlAttribute.Add(“class”, “my-class”)
}
<ej-Splitter id=”splitter” html-attribute=”@htmlAttribute”></ej-Splitter>
 Not Available
Customize expand/collapse icons Property:
expanderTemplate
<ej-Splitter id=”splitter” expander-template=”<img class=”eimg” src=”expander.png” alt=”employee”/>”></ej-Splitter>
 Not Available
Make control flexible for mobile view Property: isResponsive
<ej-Splitter id=”splitter” is-responsive=”true”></ej-Splitter>
 By default, Splitter works with mobile mode.
Refresh the Splitter Method: refresh()

<ej-Splitter id=”splitter”></ej-Splitter>
$(“#splitter”).ejSplitter(“refresh”)
 Method: refresh()
<ejs-splitter id=”splitter”></ejs-splitter>
$(“#splitter”).ejSplitter(“refresh”);
Destroy the Control Method: destroy()

<ej-Splitter id=”splitter”></ej-Splitter>
$(“#splitter”).ejSplitter(“destroy”)
 Method: destroy()
<ejs-splitter id=”splitter”></ejs-splitter>
$(“#splitter”).ejSplitter(“destroy”);
Event triggers after the Splitter created successfully Event: create

<ej-Splitter id=”splitter” create=”onCreate”></ej-Splitter>
function onCreate(args) {}
 Event: created

<ejs-splitter id=”splitter” create=”onCreate”></ejs-splitter>
function onCreate(args) {}
Event triggers when Splitter has been destroyed Event: destroy

<ej-Splitter id=”splitter” destroy=”onDestroy”></ej-Splitter>
function onDestroy(args) {}
 Not Available

Accessibility and Localization

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

<ej-Splitter id=”splitter” allow-keyboard-navigation=”true”></ej-Splitter>
 No separate property for enable/disable keyboard navigation. Its enabled by default.
Right to Left Property: enableRTL

<ej-Splitter id=”splitter” enable-rtl=”true”></ej-Splitter>
 Property: enableRtl

<ejs-splitter id=”splitter” enable-rtl=”true”></ejs-splitter>

Control State

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

<ejs-splitter id=”splitter” enabled=”true”></ejs-splitter>

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

<ejs-splitter id=”splitter” enable-persistence=”true”></ejs-splitter>

Pane Properties

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

<ej-Splitter id=”splitter”><br/><e-split-panes>
<e-split-panes>
</ej-Splitter>
 Property: paneSettings

<ejs-splitter id=”splitter”>
<e-splitter-panes>
<e-splitter-panes>
</ejs-splitter>
Pane Content Not Available Property: content

<ejs-splitter id=”splitter”>
<e-splitter-panes>
<e-splitter-pane content=”<div>First pane Content</div>”>
</e-splitter-pane>
<e-splitter-panes>
</ejs-splitter>
Change the size of the pane Property: paneSize

<ej-Splitter id=”splitter”>
<e-split-panes>
<e-split-pane pane-size=”35%”></e-split-pane>
<e-split-panes>
</ej-Splitter>
 Property: size

<ejs-splitter id=”splitter”>
<e-splitter-panes>
<e-splitter-pane size=”25%”>
</e-splitter-pane>
<e-splitter-panes>
</ejs-splitter>
Minimum pane size Property: minSize

<ej-Splitter id=”splitter”>
<e-split-panes>
<e-split-pane min-size=”35%”></e-split-pane>
<e-split-panes>
</ej-Splitter> 		Property: min

<ejs-splitter id=”splitter”>
<e-splitter-panes>
<e-splitter-pane min=”60px”>
</e-splitter-pane>
<e-splitter-panes>
</ejs-splitter>
Maximum pane size Property: maxSize
<ej-Splitter id=”splitter”>
<e-split-panes>
<e-split-pane max-size=”30”></e-split-pane>
<e-split-panes>
</ej-Splitter>
 Property: max

<ejs-splitter id=”splitter”>
<e-splitter-panes>
<e-splitter-pane max=”60px”>
</e-splitter-pane>
<e-splitter-panes>
</ejs-splitter>
Enable/Disable the Pane Resizable behavior Property: resizable

<ej-Splitter id=”splitter”>
<e-split-panes>
<e-split-pane resizable=”true”></e-split-pane>
<e-split-panes>
</ej-Splitter>
 Property: resizable

<ej-Splitter id=”splitter”>
<e-split-panes>
<e-split-pane resizable=”true”></e-split-pane>
<e-split-panes>
</ej-Splitter>
Collapsible Property: collapsible

<ej-Splitter id=”splitter”>
<e-split-panes>
<e-split-pane collapsible=”true”></e-split-pane>
<e-split-panes>
</ej-Splitter>
 Property: collapsible

<ejs-splitter id=”splitter”>
<e-splitter-panes>
<e-splitter-pane collapsible=”true”>
</e-splitter-pane>
<e-splitter-panes>
</ejs-splitter>
Expandable Property: expandable

<ej-Splitter id=”splitter”>
<e-split-panes>
<e-split-pane expandable=”true”></e-split-pane>
<e-split-panes>
</ej-Splitter>
 Not Available
Collapsed Not Available Property: collapsed

<ejs-splitter id=”splitter”>
<e-splitter-panes>
<e-splitter-pane collapsed=”true”>
</e-splitter-pane>
<e-splitter-panes>
</ejs-splitter>
Add Pane Method: addItem()
<ej-Splitter id=”splitter”>
</ej-Splitter>
$(“#splitter”).ejSplitter(“addItem”, “New Pane 0”,
{paneSize:20, minSize:20, maxSize: 100}, 0);
 Method: addPane()
<ejs-splitter id=”splitter”></ejs-splitter>
$(“#splitter”).ejSplitter(“addPane”, “New Pane 0”,
{ size: “25%”, content: “Pane”}, 0);
Remove Pane Method: removeItem()

<ej-Splitter id=”splitter”></ej-Splitter>
$(“#splitter”).ejSplitter(“removeItem”, 0);
 Method: removePane()

<ejs-splitter id=”splitter”></ejs-splitter>
$(“#splitter”).ejSplitter(“removePane”, 0);
Collapse Pane Method: collapse()

<ej-Splitter id=”splitter”></ej-Splitter>
$(“#splitter”).ejSplitter(“collapse”, 0);
 Method: collapse()

<ejs-splitter id=”splitter”></ejs-splitter>
$(“#splitter”).ejSplitter(“collapse”, 0);
Expand Pane Method: expand()

<ej-Splitter id=”splitter”></ej-Splitter>
$(“#splitter”).ejSplitter(“expand”, 0);
 Method: expand()

<ejs-splitter id=”splitter”></ejs-splitter>
$(“#splitter”).ejSplitter(“expand”, 0);
Event triggers when before panes get expanded/collapsed Event: beforeExpandCollapse

<ej-Splitter id=”splitter”
before-expand-collapse=”onBeforeExpandCollapse”>
</ej-Splitter>
function onBeforeExpandCollapse (args) {}
 Event: beforeExpand

<ejs-splitter id=”splitter”
before-expand=”onBeforeExpand”>
</ejs-splitter>
function onBeforeExpand(args) {}
Event: beforeCollapse
<ejs-splitter id=”splitter”
before-collapse=”onBeforeCollapse”>
</ejs-splitter>
function onBeforeCollapse(args) {}
Event triggers when after panes get expanded/collapsed Event: expandCollapse

<ej-Splitter id=”splitter”
expand-collapse=”onExpandCollapse”>
</ej-Splitter>
function onExpandCollapse (args) {}
 Event: expand

<ejs-splitter id=”splitter” expand=”onExpand”>
</ejs-splitter>
function onExpand(args) {}

Event: collapse
<ejs-splitter id=”splitter” collapse=”onCollapse”>
</ejs-splitter>
function onCollapse(args) {}
Event triggers when Resizing the pane Event: resize

<ej-Splitter id=”splitter” resize=”onResize”>
</ej-Splitter>
function onResize (args) {}
 Event: resizing
<ejs-splitter id=”splitter” resizing=”onResizing”>
</ejs-splitter>
function onResizing(args) {}
Event triggers when pane is started to resize Not Available Event: resizeStart
<ejs-splitter id=”splitter” resize-start=”onResizeStart”>
</ejs-splitter>
function onResizeStart(args) {}
Event triggers when pane is stopped to resize Not Available Event: resizeStop

<ejs-splitter id=”splitter” resize-stop=”onResizeStop”>
</ejs-splitter>
function onResizeStop(args) {}
Event triggers when click template icon Event: clickOnExpander

<ej-Splitter id=”splitter”
click-on-expander=”onClickOnExpander”>
</ej-Splitter>
function onClickOnExpander (args) {}
 Not Available

Animation

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

<ej-Splitter id=”splitter”
enable-animation=”true”>
  
</ej-Splitter>
 Not Available  
AnimationSpeed Property: animationSpeed

<ej-Splitter id=”splitter”
animation-speed=”150”>
</ej-Splitter>
 Not Available