Ej1 api migration in EJ2 JavaScript Splitter control

8 May 202310 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

$(“#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

Accessibility and Localization

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”)

Control State

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”)

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

var obj = new
ej.layouts.Splitter({
enablePersistence: false
})
obj.appendTo(“#ej2_splitter”)

Pane Properties

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(‘#ej2_splitter’)

Event: beforeCollapse
var obj = new ej.layouts.Splitter({
beforeCollapse: function() {}
})
obj.appendTo(‘#ej2_splitter’)
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(‘#ej2_splitter’)

Event: collapse
var obj = new ej.layouts.Splitter({
collapse: function() {}
})
obj.appendTo(‘#ej2_splitter’)
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

Animation

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