Ej1 api migration in React Splitter component

17 Mar 20259 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” cssClass=”customClass”><EJ.Splitter> 		Property: cssClass
<SplitterComponent cssClass=”customClass”></SplitterComponent>
Adjusting Height Property: height

<EJ.Splitter id=”splitter” height=”100%”><EJ.Splitter> 		Property: height
<SplitterComponent height=”100%”></SplitterComponent>
Adjusting Width Property: width

<EJ.Splitter id=”splitter” width=”600”><EJ.Splitter> 		Property: width

<SplitterComponent width=”100%”></SplitterComponent>
Orientation Property: orientation

<EJ.Splitter id=”splitter” orientation={ej.Orientation.Vertical}><EJ.Splitter>
 Property: orientation

<SplitterComponent orientation=”Vertical”></SplitterComponent>
Separator Size Not Available Property: separatorSize

<SplitterComponent separatorSize={4}></SplitterComponent>
Adding HTML attributes Property: htmlAttributes

<EJ.Splitter id=”splitter” htmlAttributes ={htmlAttributes}><EJ.Splitter>
var htmlAttributes = { class: “my-class”, style: “border: 1px solid red”}
 Not Available
Customize expand/collapse icons Property:
expanderTemplate

<EJ.Splitter id=”splitter” expanderTemplate =‘<img class=”eimg” src=”expander.png” alt=”employee”/>’><EJ.Splitter> 		Not Available
Make control flexible for mobile view Property: isResponsive

<EJ.Splitter id=”splitter” isResponsive={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()

<SplitterComponent id=”splitter” ref={splitter=>this.splitterInstance = splitter}/></SplitterComponent>
constructor(props: {}) { this.splitterInstace.refresh();}
Destroy the Control Method: destroy()

<EJ.Splitter id=”splitter”><EJ.Splitter>
$(“#splitter”).ejSplitter(“destroy”)
 Method: destroy()
<SplitterComponent id=”splitter” ref={splitter=>this.splitterInstance = splitter}/></SplitterComponent>
constructor(props: {}) { this.splitterInstace.destroy();}
Event triggers after the Splitter created successfully Event: create

<EJ.Splitter id=”splitter” create={create}><EJ.Splitter>
function create(args) {}
 Event: created

<SplitterComponent id=”splitter” created={this.onCreated.bind(this)}/></SplitterComponent>
private onCreated() {}
Event triggers when Splitter has been destroyed Event: destroy

<EJ.Splitter id=”splitter” destroy={destroy}><EJ.Splitter>
function destroy(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” allowKeyboardNavigation ={true}><EJ.Splitter> 		No separate property for enable/disable keyboard navigation. Its enabled by default.
Right to Left Property: enableRTL

<EJ.Splitter id=”splitter” enableRTL ={false}><EJ.Splitter> 		Property: enableRtl

<SplitterComponent enableRtl={true}></SplitterComponent>

Control State

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

<SplitterComponent enabled={true}></SplitterComponent>

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

<SplitterComponent enablePersistence={true}></SplitterComponent>

Pane Properties

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

<EJ.Splitter id=”splitter” properties={property}><EJ.Splitter>
var property = [];
Property: paneSettings
<SplitterComponent> <PanesDirective> <PaneDirective/> </PanesDirective></SplitterComponent>
Pane Content Not Available Property: content
<SplitterComponent> <PanesDirective> <PaneDirective content=”<div>First Pane Content</div>”/> </PanesDirective> </SplitterComponent>
Change the size of the pane Property: paneSize
<EJ.Splitter id=”splitter” properties={property}><EJ.Splitter>
var property = [{paneSize: “30px”}];
 Property: size
<SplitterComponent><PanesDirective><PaneDirective size=”25%”/></PanesDirective></SplitterComponent>
Minimum pane size Property: minSize
<EJ.Splitter id=”splitter” properties={property}><EJ.Splitter>
var property = [{minSize: 30}];
 Property: min

<SplitterComponent><PanesDirective><PaneDirective min=”60px”/></PanesDirective></SplitterComponent>
Maximum pane size Property: maxSize

<EJ.Splitter id=”splitter” properties={property}><EJ.Splitter>
var property = [{maxSize: 30}];
 Property: max

<SplitterComponent><PanesDirective><PaneDirective max=”60px”/></PanesDirective></SplitterComponent>
Enable/Disable the Pane Resizable behavior Property: resizable

<EJ.Splitter id=”splitter” properties={property}><EJ.Splitter>
var property = [{resizable: false }];
 Property: resizable

<SplitterComponent><PanesDirective><PaneDirective resizable={false}/></PanesDirective></SplitterComponent>
Collapsible Property: collapsible

<EJ.Splitter id=”splitter” properties={property}><EJ.Splitter>
var property = [{collapsible: true }];
 Property: collapsible

<SplitterComponent><PanesDirective><PaneDirective collapsible={true}/></PanesDirective></SplitterComponent>
Expandable Property: expandable

<EJ.Splitter id=”splitter” properties={property}><EJ.Splitter>
var property = [{expandable: true }];
 Not Available
Collapsed Not Available Property: collapsed

<SplitterComponent><PanesDirective><PaneDirective collapsed={true}/></PanesDirective></SplitterComponent>
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()

<SplitterComponent id=”splitter” ref={splitter=>this.splitterInstance = splitter}/></SplitterComponent>
constructor(props: {}) {this.splitterInstace. addPane({size: “25%”, content: “Pane”}, 0)}
Remove Pane Method: removeItem()

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

<SplitterComponent id=”splitter” ref={splitter=>this.splitterInstance = splitter}/></SplitterComponent>
constructor(props: {}) { this.splitterInstace. removePane(0);}
Collapse Pane Method: collapse()

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

<SplitterComponent id=”splitter” ref={splitter=>this.splitterInstance = splitter}/></SplitterComponent>
constructor(props: {}) {this.splitterInstace.collapse(0);}
Expand Pane Method: expand()

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

<SplitterComponent id=”splitter” ref={splitter=>this.splitterInstance = splitter}/></SplitterComponent>
constructor(props: {}) { this.splitterInstace.expand(0);}
Event triggers when before panes get expanded/collapsed Event: beforeExpandCollapse

<EJ.Splitter id=”splitter” beforeExpandCollapse ={ beforeExpandCollapse }><EJ.Splitter>
function beforeExpandCollapse (args) {}
 Event: beforeExpand

<SplitterComponent id=”splitter” beforeExpand ={this. onBeforeExpand.bind(this)}/></SplitterComponent>
private onBeforeExpand () {}
Event: beforeCollapse
<SplitterComponent id=”splitter” beforeCollapse ={this. onBeforeCollapse.bind(this)}/></SplitterComponent>
private onBeforeCollapse() {}
Event triggers when after panes get expanded/collapsed Event: expandCollapse

<EJ.Splitter id=”splitter” expandCollapse ={ expandCollapse}><EJ.Splitter>
function expandCollapse (args) { }
 Event: expand

<SplitterComponent id=”splitter” expand ={this. onExpand.bind(this)}/></SplitterComponent>
private onExpand () {}
Event: collapse
<SplitterComponent id=”splitter” collapse={this. onCollapse.bind(this)}/></SplitterComponent>
private onCollapse () {}
Event triggers when Resizing the pane Event: resize

<EJ.Splitter id=”splitter” resize ={ resize }><EJ.Splitter>
function resize (args) { }
 Event: resizing

<SplitterComponent id=”splitter” resizing={this.onResizing.bind(this)}/></SplitterComponent>
private onResizing() {}
Event triggers when pane is started to resize Not Available Event: resizeStart

<SplitterComponent id=”splitter” resizeStart={this.onResizeStart.bind(this)}/></SplitterComponent>
private onResizeStart () {}
Event triggers when pane is stopped to resize Not Available Event: resizeStop

<SplitterComponent id=”splitter” resizeStop ={this.onResizeStop.bind(this)}/></SplitterComponent>
private onResizeStop () {}
Event triggers when click template icon Event: clickOnExpander

<EJ.Splitter id=”splitter” clickOnExpander ={ clickOnExpander }><EJ.Splitter>
function clickOnExpander (args) { }
 Not Available

Animation

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

<EJ.Splitter id=”splitter” enableAnimation ={true}><EJ.Splitter>
 		 Not Available
AnimationSpeed Property: animationSpeed

<EJ.Splitter id=”splitter” animationSpeed ={150}><EJ.Splitter>
 		 Not Available