This article describes the API migration process of Splitter component from Essential JS 1 to Essential JS 2.
| 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 |
| 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> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enable/Disable the control | Not Available | Property: enabled <SplitterComponent enabled={true}></SplitterComponent> |
| 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> |
| 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 |
| 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 |