ASP.NET Core

Introduction

Installation

System Requirements

NuGet Packages

Right-To-Left

State Persistence

Accessibility

Browser Compatibility

API Reference

Release Notes

Getting Started

Appearance

Common

Accordion

Accumulation Chart

AutoComplete

Avatar

Badge

Barcode

Button

ButtonGroup

Calendar

Card

Chart

CheckBox

Chips

Circular Gauge

ColorPicker

ComboBox

ContextMenu

Dashboard Layout

DatePicker

DateRangePicker

DateTimePicker

Diagram

Dialog

DocumentEditor

DropDownButton

DropDownList

FileManager

Gantt

Grid

HeatMap

In-place Editor

Linear Gauge

List Box

ListView

Maps

MaskedTextBox

MultiSelect

NumericTextBox

PDF Viewer

Pivot Table

ProgressButton

QueryBuilder

RadioButton

Range Navigator

RichTextEditor

Schedule

Sidebar

Slider

Smith Chart

Sparkline

Spinner

SplitButton

Splitter

Spreadsheet

Stock Chart

Switch

Tab

TextBox

TimePicker

Toast

Toolbar

Tooltip

Tree Grid

TreeMap

TreeView

Uploader

/ 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 `<ej-Splitter id=”splitter” css-class=”customClass”></ej-Splitter>`	Property: cssClass `<ejs-splitter id=”splitter” css-class=”customClass”></ejs-splitter>`
Adjusting Height	Property: height `<ej-Splitter id=”splitter” height=”100%”></ej-Splitter>`	Property: height `<ejs-splitter id=”splitter” height=”100%”></ejs-splitter>`
Adjusting Width	Property: width `<ej-Splitter id=”splitter” width=”600”></ej-Splitter>`	Property: width `<ejs-splitter id=”splitter” width=”100%”></ejs-splitter>`
Orientation	Property: orientation `<ej-Splitter id=”splitter” orientation=”@Orientation.Vertical”></ej-Splitter>`	Property: orientation `<ejs-splitter id=”splitter” orientation=”Vertical”></ejs-splitter>`
Separator Size	Not Available	Property: separatorSize `<ejs-splitter id=”splitter” separatorSize=”4”></ejs-splitter>`
Adding HTML attributes	Property: htmlAttributes `@{IDictionary` `<string, object> htmlAttribute =` `new Dictionary<string, object>();` `htmlAttribute.Add(“class”, “my-class”)` }
`<ej-Splitter id=”splitter” html-attribute=”@htmlAttribute”></ej-Splitter>`	Not Available
Customize expand/collapse icons	Property: expanderTemplate `<ej-Splitter id=”splitter” expander-template=”<img class=”eimg” src=”expander.png” alt=”employee”/>”></ej-Splitter>`	Not Available
Make control flexible for mobile view	Property: isResponsive `<ej-Splitter id=”splitter” is-responsive=”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() `<ejs-splitter id=”splitter”></ejs-splitter>` $(“#splitter”).ejSplitter(“refresh”);
Destroy the Control	Method: destroy() `<ej-Splitter id=”splitter”></ej-Splitter>` $(“#splitter”).ejSplitter(“destroy”)	Method: destroy() `<ejs-splitter id=”splitter”></ejs-splitter>` $(“#splitter”).ejSplitter(“destroy”);
Event triggers after the Splitter created successfully	Event: create `<ej-Splitter id=”splitter” create=”onCreate”></ej-Splitter>` function onCreate(args) {}	Event: created `<ejs-splitter id=”splitter” create=”onCreate”></ejs-splitter>` function onCreate(args) {}
Event triggers when Splitter has been destroyed	Event: destroy `<ej-Splitter id=”splitter” destroy=”onDestroy”></ej-Splitter>` function onDestroy(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” allow-keyboard-navigation=”true”></ej-Splitter>`	No separate property for enable/disable keyboard navigation. Its enabled by default.
Right to Left	Property: enableRTL `<ej-Splitter id=”splitter” enable-rtl=”true”></ej-Splitter>`	Property: enableRtl `<ejs-splitter id=”splitter” enable-rtl=”true”></ejs-splitter>`

Control State

Behavior	API in Essential JS 1	API in Essential JS 2
Enable/Disable the control	Not Available	Property: enabled `<ejs-splitter id=”splitter” enabled=”true”></ejs-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 `<ejs-splitter id=”splitter” enable-persistence=”true”></ejs-splitter>`

Pane Properties

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: properties `<ej-Splitter id=”splitter”><br/><e-split-panes>` `<e-split-panes>` `</ej-Splitter>`	Property: paneSettings `<ejs-splitter id=”splitter”>` `<e-splitter-panes>` `<e-splitter-panes>`
`</ejs-splitter>`
Pane Content	Not Available	Property: content `<ejs-splitter id=”splitter”>` `<e-splitter-panes>` `<e-splitter-pane content=”<div>First pane Content</div>”>` `</e-splitter-pane>` `<e-splitter-panes>` `</ejs-splitter>`
Change the size of the pane	Property: paneSize `<ej-Splitter id=”splitter”>` `<e-split-panes>` `<e-split-pane pane-size=”35%”></e-split-pane>` `<e-split-panes>` `</ej-Splitter>`	Property: size `<ejs-splitter id=”splitter”>` `<e-splitter-panes>` `<e-splitter-pane size=”25%”>` `</e-splitter-pane>` `<e-splitter-panes>` `</ejs-splitter>`
Minimum pane size	Property: minSize `<ej-Splitter id=”splitter”>` `<e-split-panes>` `<e-split-pane min-size=”35%”></e-split-pane>` `<e-split-panes>` `</ej-Splitter>`	Property: min `<ejs-splitter id=”splitter”>` `<e-splitter-panes>` `<e-splitter-pane min=”60px”>` `</e-splitter-pane>` `<e-splitter-panes>`
`</ejs-splitter>`
Maximum pane size	Property: maxSize `<ej-Splitter id=”splitter”>` `<e-split-panes>` `<e-split-pane max-size=”30”></e-split-pane>` `<e-split-panes>` `</ej-Splitter>`	Property: max `<ejs-splitter id=”splitter”>` `<e-splitter-panes>` `<e-splitter-pane max=”60px”>` `</e-splitter-pane>` `<e-splitter-panes>` `</ejs-splitter>`
Enable/Disable the Pane Resizable behavior	Property: resizable $(“#splitter”).ejSplitter({ properties: [{ resizable: false }] });	Property: resizable `<ej-Splitter id=”splitter”>` `<e-split-panes>` `<e-split-pane resizable=”true”></e-split-pane>` `<e-split-panes>` `</ej-Splitter>`
Collapsible	Property: collapsible `<ej-Splitter id=”splitter”>` `<e-split-panes>` `<e-split-pane collapsible=”true”></e-split-pane>` `<e-split-panes>` `</ej-Splitter>`	Property: collapsible `<ejs-splitter id=”splitter”>` `<e-splitter-panes>` `<e-splitter-pane collapsible=”true”>` `</e-splitter-pane>` `<e-splitter-panes>` `</ejs-splitter>`
Expandable	Property: expandable `<ej-Splitter id=”splitter”>` `<e-split-panes>` `<e-split-pane expandable=”true”></e-split-pane>` `<e-split-panes>` `</ej-Splitter>`	Not Available
Collapsed	Not Available	Property: collapsed `<ejs-splitter id=”splitter”>` `<e-splitter-panes>` `<e-splitter-pane collapsed=”true”>` `</e-splitter-pane>` `<e-splitter-panes>` `</ejs-splitter>`
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() `<ejs-splitter id=”splitter”></ejs-splitter>` $(“#splitter”).ejSplitter(“addPane”, “New Pane 0”, { size: “25%”, content: “Pane”}, 0);
Remove Pane	Method: removeItem() `<ej-Splitter id=”splitter”></ej-Splitter>` $(“#splitter”).ejSplitter(“removeItem”, 0);	Method: removePane() `<ejs-splitter id=”splitter”></ejs-splitter>` $(“#splitter”).ejSplitter(“removePane”, 0);
Collapse Pane	Method: collapse() `<ej-Splitter id=”splitter”></ej-Splitter>` $(“#splitter”).ejSplitter(“collapse”, 0);	Method: collapse() `<ejs-splitter id=”splitter”></ejs-splitter>` $(“#splitter”).ejSplitter(“collapse”, 0);
Expand Pane	Method: expand() `<ej-Splitter id=”splitter”></ej-Splitter>` $(“#splitter”).ejSplitter(“expand”, 0);	Method: expand() `<ejs-splitter id=”splitter”></ejs-splitter>` $(“#splitter”).ejSplitter(“expand”, 0);
Event triggers when before panes get expanded/collapsed	Event: beforeExpandCollapse `<ej-Splitter id=”splitter”` `before-expand-collapse=”onBeforeExpandCollapse”>` `</ej-Splitter>` function onBeforeExpandCollapse (args) {}	Event: beforeExpand `<ejs-splitter id=”splitter”` `before-expand=”onBeforeExpand”>`
`</ejs-splitter>` function onBeforeExpand(args) {} Event: beforeCollapse `<ejs-splitter id=”splitter”` `before-collapse=”onBeforeCollapse”>` `</ejs-splitter>` function onBeforeCollapse(args) {}
Event triggers when after panes get expanded/collapsed	Event: expandCollapse `<ej-Splitter id=”splitter”` `expand-collapse=”onExpandCollapse”>` `</ej-Splitter>` function onExpandCollapse (args) {}	Event: expand `<ejs-splitter id=”splitter” expand=”onExpand”>` `</ejs-splitter>` function onExpand(args) {} Event: collapse `<ejs-splitter id=”splitter” collapse=”onCollapse”>` `</ejs-splitter>` function onCollapse(args) {}
Event triggers when Resizing the pane	Event: resize `<ej-Splitter id=”splitter” resize=”onResize”>`
`</ej-Splitter>` function onResize (args) {}	Event: resizing `<ejs-splitter id=”splitter” resizing=”onResizing”>` `</ejs-splitter>` function onResizing(args) {}
Event triggers when pane is started to resize	Not Available	Event: resizeStart `<ejs-splitter id=”splitter” resize-start=”onResizeStart”>` `</ejs-splitter>` function onResizeStart(args) {}
Event triggers when pane is stopped to resize	Not Available	Event: resizeStop `<ejs-splitter id=”splitter” resize-stop=”onResizeStop”>` `</ejs-splitter>` function onResizeStop(args) {}
Event triggers when click template icon	Event: clickOnExpander `<ej-Splitter id=”splitter”` `click-on-expander=”onClickOnExpander”>` `</ej-Splitter>` function onClickOnExpander (args) {}	Not Available

Animation

Behavior	API in Essential JS 1	API in Essential JS 2
EnableAnimation	Property: enableAnimation `<ej-Splitter id=”splitter”` `enable-animation=”true”>`
`</ej-Splitter>`	Not Available
AnimationSpeed	Property: animationSpeed `<ej-Splitter id=”splitter”` `animation-speed=”150”>` `</ej-Splitter>`	Not Available

Splitter / Different layouts

Spreadsheet / Getting Started

Contents

Common
Accessibility and Localization
Control State
State Maintenance
Pane Properties
Animation