ASP.NET MVC
Demos
Support
Forum
Download
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Splitter / Migration from Essential JS 1
Search results

Migration from Essential JS 1

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

@{Html.EJ().Splitter(“splitter”)
.CssClass(“customClass”).Render();}
Property: cssClass

@Html.EJS().Splitter(“splitter”)
.CssClass(“customClass”).Render();
Adjusting Height Property: height

@{Html.EJ().Splitter(“splitter”)
.Height(“100%”).Render();}
Property: height

@Html.EJS().Splitter(“splitter”)
.Height(“100%”).Render();
Adjusting Width Property: width

@{Html.EJ().Splitter(“splitter”)
.Width(“600”).Render();}
 Property: width

@Html.EJS().Splitter(“splitter”)
.Width(“100%”).Render();
Orientation Property: orientation

@{Html.EJ().Splitter(“splitter”)
.Orientation(Orientation.Vertical).Render();}
 Property: orientation

@Html.EJS().Splitter(“splitter”)
.Orientation(Syncfusion.EJ2.Layouts.Orientation.Vertical).Render();
Separator Size Not Available Property: separatorSize

@Html.EJS().Splitter(“splitter”)
.SeparatorSize(4).Render();
Adding HTML attributes Property: *htmlAttributes*

@{

IDictionary<string, object>
htmlAttribute = new Dictionary
<string, object>();
htmlAttribute.Add(“class”, “my-class”)
}

@{Html.EJ().Splitter(“splitter”).HtmlAttributes(htmlAttribute).Render();}
| Not Available | | Customize expand/collapse icons | Property:
expanderTemplate

@{Html.EJ().Splitter(“splitter”).ExpanderTemplate(<img class=”eimg” src=”expander.png” alt=”employee”/>).Render();}
| Not Available | | Make control flexible for mobile view | Property: isResponsive

@{Html.EJ().Splitter(“splitter”).IsResponsive(true).Render();}
| By default, Splitter works with mobile mode.| | Refresh the Splitter | Method: refresh()

@{Html.EJ().Splitter(“splitter”).Render();}
$(“#splitter”).ejSplitter(“refresh”)
| Method: refresh()

@Html.EJS().Splitter(“splitter”).Render();
$(“#splitter”).ejSplitter(“refresh”);
| | Destroy the Control | Method: destroy()

@{Html.EJ().Splitter(“splitter”).Render();}
$(“#splitter”).ejSplitter(“destroy”)
| Method: destroy()

@Html.EJS().Splitter(“splitter”).Render();
$(“#splitter”).ejSplitter(“destroy”);
| | Event triggers after the Splitter created successfully | Event: create

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>e.Create(“onCreate”)).Render();}
function onCreate(args) {}
| Event: created

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.Create(“onCreate”)).Render();
function onCreate(args) { }
| | Event triggers when Splitter has been destroyed | Event: destroy

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>e.Destroy(“onDestroy”)).Render();}
function onDestroy(args) {}
}); | Not Available |

Accessibility and Localization

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

@{Html.EJ().Splitter(“splitter”)
.AllowKeyboardNavigation(true).Render();}
No separate property for enable/disable keyboard navigation. Its enabled by default.
Right to Left Property: enableRTL

@{Html.EJ().Splitter(“splitter”)
.EnableRTL(false).Render();}
 Property: enableRtl

@Html.EJS().Splitter(“splitter”)
.EnableRtl(true).Render();

Control State

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the control Not Available Property: enabled

@Html.EJS().Splitter(“splitter”)
.Enabled(true).Render();

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

@Html.EJS().Splitter(“splitter”)
.EnablePersistence(true).Render();

Pane Properties

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

@{Html.EJ().Splitter(“splitter”)
.PaneProperties().Render();}
 Property: paneSettings

@Html.EJS().Splitter(“splitter”)
.PaneSettings().Render();
Pane Content Not Available Property: content

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Content(”<div>First Pane Content</div>”)})
.Render();
Change the size of the pane Property: paneSize

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>{p.Add().PaneSize(“30px”)})
.Render();}
 Property: size

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Size(”25%”)})
.Render();
Minimum pane size Property: minSize

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>{p.Add().MinSize(30)})
.Render();}
 Property: min

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Min(”60px”)})
.Render();
Maximum pane size Property: maxSize

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>{p.Add().MaxSize(30)})
.Render();}
 Property: max

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Max(”60px”)})
.Render();
Enable/Disable the Pane Resizable behavior Property: resizable

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>{p.Add().Resizable(false)})
.Render();}
 Property: resizable

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Resizable(false)})
.Render();
Collapsible Property: collapsible

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>{p.Add().Collapsible(true)})
.Render();}
 Property: collapsible

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Collapsible(true)})
.Render();
Expandable Property: expandable

@{Html.EJ().Splitter(“splitter”)
.PaneProperties(p=>{p.Add().Expandable(true)})
.Render();}
 Not Available
Collapsed Not Available Property: collapsed

@Html.EJS().Splitter(“splitter”)
.PaneSettings(item=>{item.Collapsed(true)})
.Render();
Add Pane Method: addItem()

@{Html.EJ().Splitter(“splitter”)
.Render();}
$(“#splitter”).ejSplitter(“addItem”, “New Pane 0”, {paneSize:20, minSize:20, maxSize: 100}, 0);
 Method: addPane()

@Html.EJS().Splitter(“splitter”).Render();
$(“#splitter”).ejSplitter(“addPane”, “New Pane 0”, { size: “25%”, content: “Pane”}, 0);
Remove Pane Method: removeItem()

@{Html.EJ().Splitter(“splitter”).Render();}
$(“#splitter”).ejSplitter(“removeItem”, 0);
 Method: removePane()

@Html.EJS().Splitter(“splitter”).Render();
$(“#splitter”).ejSplitter(“removePane”, 0);
Collapse Pane Method: collapse()

@{Html.EJ().Splitter(“splitter”).Render();}
$(“#splitter”).ejSplitter(“collapse”, 0);
 Method: collapse()

@Html.EJS().Splitter(“splitter”).Render();
$(“#splitter”).ejSplitter(“collapse”, 0);
Expand Pane Method: expand()

@{Html.EJ().Splitter(“splitter”).Render();}
$(“#splitter”).ejSplitter(“expand”, 0);
 Method: expand()

@Html.EJS().Splitter(“splitter”).Render();
$(“#splitter”).ejSplitter(“expand”, 0);
Event triggers when before panes get expanded/collapsed Event: beforeExpandCollapse

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>e.BeforeExpandCollapse
(“onBeforeExpandCollapse”))
.Render();}
function onBeforeExpandCollapse (args) {}
 Event: beforeExpand

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.BeforeExpand(“onBeforeExpand”))
.Render();

function onBeforeExpand(args) {}
Event: beforeCollapse
@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.BeforeCollapse(“onBeforeCollapse”))
.Render();
function onBeforeCollapse(args) {}
Event triggers when after panes get expanded/collapsed Event: expandCollapse

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>e.ExpandCollapse(“onExpandCollapse”))
.Render();}
function onExpandCollapse (args) {}
 Event: expand

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.Expand(“onExpand”))
.Render();
function onExpand(args) {}
Event: collapse
@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.Collapse(“onCollapse”))
.Render();
function onCollapse(args) {}
Event triggers when Resizing the pane Event: resize

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>e.Resize(“onResize”))
.Render();}
function onResize (args) {}
 Event: resizing

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.Resizing(“onResizing”))
.Render();
function onResizing(args) {}
Event triggers when pane is started to resize Not Available Event: resizeStart

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.ResizeStart(“onResizeStart”))
.Render();
function onResizeStart(args) {}
Event triggers when pane is stopped to resize Not Available Event: resizeStop

@Html.EJS().Splitter(“splitter”)
.ClientSideEvents(e=>e.ResizeStop(“onResizeStop”))
.Render();
function onResizeStop(args) {}
Event triggers when click template icon Event: clickOnExpander

@{Html.EJ().Splitter(“splitter”)
.ClientSideEvents(e=>e
.ClickOnExpander(“onClickOnExpander”))
.Render();}
function clickOnExpander (args) {}
 Not Available

Animation

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

@{Html.EJ().Splitter(“splitter”)
.EnableAnimation(true).Render();}
 Not Available
AnimationSpeed Property: animationSpeed

@{Html.EJ().Splitter(“splitter”)
.AnimationSpeed(150).Render();}
 Not Available
Splitter / Different layouts
Spreadsheet / Getting Started