Ej1 api migration in EJ2 TypeScript Splitter control

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

var splitter = new
 ej.Splitter($(“#splitter”), {
  cssClass: ”custom-class”
});
Property: cssClass

let obj: Splitter = new Splitter({
cssClass: “custom-class”
  })
  obj.appendTo(“#ej2_splitter”)
Adjusting Height Property: height

var splitter = new
 ej.Splitter($(“#splitter”), {
height: ”100%”
});
Property: height

let obj: Splitter = new Splitter ({
height: ‘100%’
  })
  obj.appendTo(“#ej2_splitter”)
Adjusting Width Property: width

var splitter = new
 ej.Splitter($(“#splitter”), {
width: ”600”
});
Property: width

let obj: Splitter = new Splitter({
width: ‘100%’
 })
  obj.appendTo(“#ej2_splitter”)
Orientation Property: orientation

var splitter = new
 ej.Splitter($(“#splitter”), {
orientation:
ej.Orientation.Horizontal
});		 Property: orientation

let obj: Splitter = new Splitter({
orientation: ‘Horizontal’
 })
  obj.appendTo(“#ej2_splitter”)
Separator Size Not Available Property: separatorSize

let obj: Splitter = new Splitter({
separatorSize: ‘4’
  })
  obj.appendTo(“#ej2_splitter”)
Adding HTML attributes Property: htmlAttributes

var splitter = new
ej.Splitter($(“#splitter”), {
htmlAttributes: { class: “my-
class” }
 });
 		 Not Available
Customize expand/collapse icons Property:
expanderTemplate

var splitter = new
ej.Splitter($(“#splitter”), {
expanderTemplate: ‘<img
class=”eimg”
src=”expander.png”
alt=”employee”/>’
  });		 Not Available
Make control flexible for mobile view Property: isResponsive

var splitter = new
ej.Splitter($(“#splitter”), {
isResponsive: true
  });		 By default, Splitter works with mobile mode.
Refresh the Splitter Method: refresh()

var splitter = new
ej.Splitter($(“#splitter”), { });
splitter.refresh();
 		 Method: refresh()

let obj: Splitter = new Splitter()
obj.appendTo(“#ej2_splitter”)
obj.refresh();
 
Destroy the Control Method: destroy()

var splitter = new
ej.Splitter($(“#splitter”), { });
splitter.destroy();
 		 Method: destroy()

let obj: Splitter = new Splitter()
obj.appendTo(“#ej2_splitter”)
obj.destroy();
 
Event triggers after the Splitter created successfully Event: create

var splitter = new
ej.Splitter($(“#splitter”), {
create: function(args){}
  });
 		 Event: created

let obj: Splitter = new Splitter({
created: function() {}
})
obj.appendTo(“#ej2_splitter”);
Event triggers when Splitter has been destroyed Event: destroy

var splitter = new
ej.Splitter($(“#splitter”), {
destroy: function(args){}
});		 Not Available

Accessibility and Localization

Behavior API in Essential JS 1 API in Essential JS 2
Keyboard Navigation Property: allowKeyboardNavigation

var splitter = new
ej.Splitter($(“#splitter”), {
allowKeyboardNavigation: true
});
 		 No separate property for enable/disable keyboard navigation. Its enabled by default.
Right to Left Property: enableRTL

var splitter = new
ej.Splitter($(“#splitter”), {
enableRTL: false
});
 		 Property: enableRtl

Let obj: Splitter = new
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

let obj: Splitter = new
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

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

Pane Properties

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

var splitter = new
ej.Splitter($(“#splitter”), {
properties: [ ]
});
 Property: paneSettings

let obj: Splitter = new
Splitter({
paneSettings: [ ]
})
obj.appendTo(“#ej2_splitter”)
Pane Content Not Available Property: content

let obj: Splitter = new
Splitter({
paneSettings: [{ content:
‘First Pane Content’}]
})
obj.appendTo(“#ej2_splitter”)
Change the size of the pane Property: paneSize

var splitter = new
ej.Splitter($(“#splitter”), {
properties: [{ paneSize: “30px”}]
});
Property: size

let obj: Splitter = new
Splitter({
paneSettings: [{ size: ‘25%’}]
})
obj.appendTo(“#ej2_splitter”)
Minimum pane size Property: minSize

var splitter = new
ej.Splitter($(“#splitter”), {
properties: [{ minSize: 30 }]
});
Property: min

let obj: Splitter = new
Splitter({
paneSettings: [{ min: ‘60px’}]
})
obj.appendTo(“#ej2_splitter”)
Maximum pane size Property: maxSize

var splitter = new
ej.Splitter($(“#splitter”), {
properties: [{maxSize: 30 }]
});
 Property: max

let obj: Splitter = new
Splitter({
paneSettings: [{ max: ‘60px’}]
})
obj.appendTo(“#ej2_splitter”)
Enable/Disable the Pane Resizable behavior Property: resizable

var splitter = new
ej.Splitter($(“#splitter”),{
properties: [{ resizable: false }]
});
 Property: resizable

let obj: Splitter = new
Splitter({
paneSettings: [{ resizable:
false }]
})
obj.appendTo(“#ej2_splitter”)
Collapsible Property: collapsible

var splitter = new
ej.Splitter($(“#splitter”), {
properties: [{ collapsible: true }]
});
 Property: collapsible

let obj: Splitter = new
Splitter({
paneSettings: [{ collapsible:
true }]
})
obj.appendTo(“#ej2_splitter”)
Expandable Property: expandable

var splitter = new
ej.Splitter($(“#splitter”), {
properties: [{expandable: true }]
});
Not Available
Collapsed Not Available Property: collapsed

let obj: Splitter = new
Splitter({
paneSettings: [{ collapsed:
true }]
})
obj.appendTo(“#ej2_splitter”)
Add Pane Method: addItem()

var splitter = new
ej.Splitter($(“#splitter”), { });
splitter.addItem(“New Pane 0”, {
paneSize: 20, minSize: 20, maxSize:
100}, 0);		 Method: addPane()

let obj: Splitter = new
Splitter()
obj.appendTo(“#ej2_splitter”)
obj.addPane({size: “25%”,
content: “Pane”}, 0)
Remove Pane Method: removeItem()

var splitter = new
ej.Splitter($(“#splitter”), { });
splitter.removeItem(0);
Method: removePane()

let obj: Splitter = new
Splitter()
obj.appendTo(“#ej2_splitter”)
obj.removePane(0);
Collapse Pane Method: collapse()

var splitter = new
ej.Splitter($(“#splitter”), { });
splitter.collapse(0);
Method: collapse()

let obj: Splitter = new
Splitter()
obj.appendTo(“#ej2_splitter”)
obj.collapse(0);
Expand Pane Method: expand()

var splitter = new
ej.Splitter($(“#splitter”), { });
splitter.expand(0);
Method: expand()

let obj: Splitter = new
Splitter()
obj.appendTo(“#ej2_splitter”)
obj.expand(0);
Event triggers when before panes get expanded/collapsed Event: beforeExpandCollapse

var splitter = new
ej.Splitter($(“#splitter”), {
beforeExpandCollapse: function
(args) {}
});
Event: beforeExpand

let obj = new Splitter({
beforeExpand: function() {}
})
obj.appendTo(‘#ej2_splitter’)

Event: beforeCollapse
let obj = new Splitter({
beforeCollapse: function() {}
})
obj.appendTo(‘#ej2_splitter’)
Event triggers when after panes get expanded/collapsed Event: expandCollapse

var splitter = new
ej.Splitter($(“#splitter”), {
beforeCollapse: function
(args) {}
});
Event: expand

let obj = new Splitter({
expand: function() {}
})
obj.appendTo(‘#ej2_splitter’)

Event: collapse
let obj = new Splitter({
collapse: function() {}
})
obj.appendTo(‘#ej2_splitter’)
Event triggers when Resizing the pane Event: resize

var splitter = new
ej.Splitter($(“#splitter”), {
resize: function
(args) {}
});
Event: resizing

let obj = new Splitter({
resizing: function() {}
})
obj.appendTo(‘#ej2_splitter’)
Event triggers when pane is started to resize Not Available Event: resizeStart

let obj = new Splitter({
resizeStart: function() {}
})
obj.appendTo(‘#ej2_splitter’)
Event triggers when pane is stopped to resize Not Available Event: resizeStop

let obj = new Splitter({
resizeStop: function() {}
})
obj.appendTo(‘#ej2_splitter’)
Event triggers when click template icon Event: clickOnExpander

var splitter = new
ej.Splitter($(“#splitter”), {
clickOnExpander: function
(args) {}
});
Not Available

Animation

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

var splitter = new
ej.Splitter($(“#splitter”), {
enableAnimation: true
});
 		 Not Available
AnimationSpeed Property: animationSpeed

var splitter = new
ej.Splitter($(“#splitter”), {
animationSpeed: 150
});
 		 Not Available