Splitter

Splitter is a layout user interface (UI) control that has resizable and collapsible split panes. The container can be split into multiple panes, which are oriented horizontally or vertically. The separator (divider) splits the panes and resizes and expands/collapses the panes. The splitter is placed inside the split pane to make a nested layout user interface.

<div id="splitter">
 <div> Left Pane </div>
 <div> Center Pane </div>
 <div> Right Pane </div>
</div>

<script>
  var splitterObj = new Splitter({ width: '300px', height: '200px'});
  splitterObj.appendTo('#splitter');
</script>

Properties

cssClass

string

Specifies the CSS class names that defines specific user-defined styles and themes to be appended on the root element of the Splitter. It is used to customize the Splitter control. One or more custom CSS classes can be specified to the Splitter.

Defaults to ”

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence

boolean

Enables or disables the persisting component’s state between page reloads.

Defaults to false

enableReversePanes

boolean

Specifies the value whether splitter panes are reordered or not .

Defaults to true

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

Specifies boolean value that indicates whether the component is enabled or disabled. The Splitter component does not allow to interact when this property is disabled.

Defaults to true

height

string

Specifies the height of the Splitter component that accepts both string and number values.

Defaults to ‘100%’

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

orientation

Orientation

Specifies a value that indicates whether to align the split panes horizontally or vertically.

• Set the orientation property as “Horizontal” to create a horizontal splitter that aligns the panes left-to-right.
• Set the orientation property as “Vertical” to create a vertical splitter that aligns the panes top-to-bottom.

    <div id="splitter">
	<div> Left pane</div>
	<div> Right pane</div>
</div>

import { Splitter } from '@syncfusion/ej2-layouts';
    
    let splitObj1: Splitter = new Splitter({
        height: '100px',
       orientation : 'Vertical'
    });
    splitObj1.appendTo('#splitter');

Defaults to Horizontal

paneSettings

PanePropertiesModel[]

Configures the individual pane behaviors such as content, size, resizable, minimum, maximum validation, collapsible and collapsed.

<div id="splitter"></div>

import { Splitter } from "@syncfusion/ej2-layouts";

let splitObj1: Splitter = new Splitter({
  height: "100px",
  paneSettings: [
    { size: "25%", collapsible: "60px", content: "Left pane" },
    { size: "50%", collapsible: "60px", content: "Right pane" }
  ]
});
splitObj1.appendTo("#splitter");

Defaults to []

separatorSize

number

Specifies the size of the separator line for both horizontal or vertical orientation. The separator is used to separate the panes by lines.

Defaults to null

width

string

Specifies the width of the Splitter control, which accepts both string and number values as width. The string value can be either in pixel or percentage format.

Defaults to ‘100%’

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

addPane

Allows you to add a pane dynamically to the specified index position by passing the pane properties.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

collapse

collapses corresponding pane based on the index is passed.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the control from the DOM and also removes all its related events.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

expand

expands corresponding pane based on the index is passed.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

removePane

Allows you to remove the specified pane dynamically by passing its index value.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

beforeCollapse

EmitType<BeforeExpandEventArgs>

Triggers when before panes get collapsed.

beforeExpand

EmitType<BeforeExpandEventArgs>

Triggers when before panes get expanded.

beforeSanitizeHtml

EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

collapsed

EmitType<ExpandedEventArgs>

Triggers when after panes get collapsed.

created

EmitType<Object>

Triggers after creating the splitter component with its panes.

expanded

EmitType<ExpandedEventArgs>

Triggers when after panes get expanded.

resizeStart

EmitType<ResizeEventArgs>

Triggers when the split pane is started to resize.

resizeStop

EmitType<ResizingEventArgs>

Triggers when the resizing of split pane is stopped.

resizing

EmitType<ResizingEventArgs>

Triggers when a split pane is being resized.