Ej1 api migration in React Splitter component
30 Jan 20239 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 |