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 $(“#splitter”).ejSplitter({ cssClass: ”custom-class” }); |
Property: cssClass var obj = new ej.layouts.Splitter({ cssClass: “custom-class” }) obj.appendTo(“#ej2_splitter”) |
Adjusting Height | Property: height $(“#splitter”).ejSplitter({ height: ”100%” }); |
Property: height var obj = new ej.layouts.Splitter({ height: ‘100%’ }) obj.appendTo(“#ej2_splitter”) |
Adjusting Width | Property: width $(“#splitter”).ejSplitter({ width: ”600” }); |
Property: width var obj = new ej.layouts.Splitter({ width: ‘100%’ }) obj.appendTo(“#ej2_splitter”) |
Orientation | Property: orientation $(“#splitter”).ejSplitter({ orientation: ej.Orientation.Horizontal }); |
Property: orientation var obj = new ej.layouts.Splitter({ orientation: ‘Horizontal’ }) obj.appendTo(“#ej2_splitter”) |
Separator Size | Not Available | Property: separatorSize var obj = new ej.layouts.Splitter({ separatorSize: ‘4’ }) obj.appendTo(“#ej2_splitter”) |
Adding HTML attributes | Property: htmlAttributes $(“#splitter”).ejSplitter({ htmlAttributes: { class: “my- class” } }); |
Not Available |
Customize expand/collapse icons | Property: expanderTemplate $(“#splitter”).ejSplitter({ expanderTemplate: ‘<img class=”eimg” src=”expander.png” alt=”employee”/>’ }); |
Not Available |
Make control flexible for mobile view | Property: isResponsive $(“#splitter”).ejSplitter({ isResponsive: true }); |
By default, Splitter works with mobile mode. |
Refresh the Splitter | Method: refresh() $(‘#splitter’).ejSplitter(‘refresh’) splitter.refresh(); |
Method: refresh() var obj = new ej.layouts.Splitter() obj.appendTo(“#ej2_splitter”) obj.refresh(); |
Destroy the Control | Method: destroy() $(‘#splitter’).ejSplitter(‘destroy’) splitter.destroy(); |
Method: destroy() var obj = new ej.layouts.Splitter() obj.appendTo(“#ej2_splitter”) obj.destroy(); |
Event triggers after the Splitter created successfully | Event: create $(“#splitter”).ejSplitter({ create: function(args){} }); |
Event: created var obj = new ej.layouts.Splitter({ created: function() {} }) obj.appendTo(“#ej2_splitter”); |
Event triggers when Splitter has been destroyed | Event: destroy $(“#splitter”).ejSplitter({ destroy: function(args){} }); |
Not Available |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Keyboard Navigation | Property: allowKeyboardNavigation $(“#splitter”).ejSplitter({ allowKeyboardNavigation: true }); |
No separate property for enable/disable keyboard navigation. Its enabled by default. |
Right to Left | Property: enableRTL $(“#splitter”).ejSplitter({ enableRTL: false }); |
Property: enableRtl var obj = new ej.layouts.Splitter({ enableRtl: false }) obj.appendTo(“#ej2_splitter”) |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable/Disable the control | Not Available | Property: enabled var obj = new ej.layouts.Splitter({ enabled: true }) obj.appendTo(“#ej2_splitter”) |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Save the model value in local storage or cookies | Not Available | Property: enablePersistence var obj = new ej.layouts.Splitter({ enablePersistence: false }) obj.appendTo(“#ej2_splitter”) |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: properties $(“#splitter”).ejSplitter({ properties: [ ] }); |
Property: paneSettings var obj = new ej.layouts.Splitter({ paneSettings: [ ] }) obj.appendTo(“#ej2_splitter”) |
Pane Content | Not Available | Property: content var obj = new ej.layouts.Splitter({ paneSettings: [{ content: ‘First Pane Content’}] }) obj.appendTo(“#ej2_splitter”) |
Change the size of the pane | Property: paneSize $(“#splitter”).ejSplitter({ properties: [{ paneSize: “30px”}] }); |
Property: size var obj = new ej.layouts.Splitter({ paneSettings: [{ size: ‘25%’}] }) obj.appendTo(“#ej2_splitter”) |
Minimum pane size | Property: minSize $(“#splitter”).ejSplitter({ properties: [{ minSize: 30 }] }); |
Property: min var obj = new ej.layouts.Splitter({ paneSettings: [{ min: ‘60px’}] }) obj.appendTo(“#ej2_splitter”) |
Maximum pane size | Property: maxSize $(“#splitter”).ejSplitter({ properties: [{maxSize: 30 }] }); |
Property: max var obj = new ej.layouts.Splitter({ paneSettings: [{ max: ‘60px’}] }) obj.appendTo(“#ej2_splitter”) |
Enable/Disable the Pane Resizable behavior | Property: resizable $(“#splitter”).ejSplitter({ properties: [{ resizable: false }] }); |
Property: resizable var obj = new ej.layouts.Splitter({ paneSettings: [{ resizable: false }] }) obj.appendTo(“#ej2_splitter”) |
Collapsible | Property: collapsible $(“#splitter”).ejSplitter({ properties: [{ collapsible: true }] }); |
Property: collapsible var obj = new ej.layouts.Splitter({ paneSettings: [{ collapsible: true }] }) obj.appendTo(“#ej2_splitter”) |
Expandable | Property: expandable $(“#splitter”).ejSplitter({ properties: [{expandable: true }] }); |
Not Available |
Collapsed | Not Available | Property: collapsed var obj = new ej.layouts.Splitter({ paneSettings: [{ collapsed: true }] }) obj.appendTo(“#ej2_splitter”) |
Add Pane | Method: addItem() $(“#splitter”).ejSplitter(“addItem”, “New Pane 0”, { paneSize: 20, minSize: 20, maxSize: 100}, 0); |
Method: addPane() var obj = new ej.layouts.Splitter(); obj.appendTo(“#ej2_splitter”) obj.addPane({size: “25%”, content: “Pane”}, 0) |
Remove Pane | Method: removeItem() $(“#splitter”).ejSplitter(“removeItem”, 0) |
Method: removePane() var obj = new ej.layouts.Splitter(); obj.appendTo(“#ej2_splitter”) obj.removePane(0); |
Collapse Pane | Method: collapse() $(“#splitter”).ejSplitter(“collapse”, 0) |
Method: collapse() var obj = new ej.layouts.Splitter(); obj.appendTo(“#ej2_splitter”) obj.collapse(0); |
Expand Pane | Method: expand() $(“#splitter”).ejSplitter(“expand”, 0) |
Method: expand() var obj = new ej.layouts.Splitter(); obj.appendTo(“#ej2_splitter”) obj.expand(0); |
Event triggers when before panes get expanded/collapsed | Event: beforeExpandCollapse $(“#splitter”).ejSplitter({ beforeExpandCollapse: function (args) {} }); |
Event: beforeExpand var obj = new ej.layouts.Splitter({ beforeExpand: function() {} }) obj.appendTo(‘#ej2splitter’) Event: beforeCollapse var obj = new ej.layouts.Splitter({ beforeCollapse: function() {} }) obj.appendTo(‘#ej2splitter’) |
Event triggers when after panes get expanded/collapsed | Event: expandCollapse $(“#splitter”).ejSplitter({ beforeCollapse: function (args) {} }); |
Event: expand var obj = new ej.layouts.Splitter({ expand: function() {} }) obj.appendTo(‘#ej2splitter’) Event: collapse var obj = new ej.layouts.Splitter({ collapse: function() {} }) obj.appendTo(‘#ej2splitter’) |
Event triggers when Resizing the pane | Event: resize $(“#splitter”).ejSplitter({ resize: function (args) {} }); |
Event: resizing var obj = new ej.layouts.Splitter({ resizing: function() {} }) obj.appendTo(‘#ej2_splitter’) |
Event triggers when pane is started to resize | Not Available | Event: resizeStart var obj = new ej.layouts.Splitter({ resizeStart: function() {} }) obj.appendTo(‘#ej2_splitter’) |
Event triggers when pane is stopped to resize | Not Available | Event: resizeStop var obj = new ej.layouts.Splitter({ resizeStop: function() {} }) obj.appendTo(‘#ej2_splitter’) |
Event triggers when click template icon | Event: clickOnExpander $(“#splitter”).ejSplitter({ clickOnExpander: function (args) {} }); |
Not Available |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
EnableAnimation | Property: enableAnimation $(“#splitter”).ejSplitter({ enableAnimation: true }); |
Not Available |
AnimationSpeed | Property: animationSpeed $(“#splitter”).ejSplitter({ animationSpeed: 150 }); |
Not Available |