JavaScript/jQuery Splitter - SplitterItem

A splitter item (pane).

Type:

Object

collapsed

Specifies whether an item (pane) is initially collapsed.

Type:

Boolean

Default Value: false

NOTE
Splitter should have at least one non-collapsed pane without a set size.

collapsedSize

Specifies the size of a collapsible item (pane) when collapsed in pixels or as a percentage.

Type:

Number

|

String

| undefined
Default Value: undefined

index.js
  • $(() => {
  • $("#splitter").dxSplitter({
  • items: [
  • {
  • // ...
  • collapsedSize: "20px",
  • }
  • ],
  • });
  • });
NOTE
The collapsedSize value must not exceed maxSize or be less then minSize.

View Demo

collapsible

Specifies whether an item (pane) is collapsible.

Type:

Boolean

Default Value: false

Splitter with collapsible panes

To collapse a pane, you can also double-click the separator bar.

NOTE
Splitter should have at least one non-collapsed pane without a set size.

View Demo

maxSize

Specifies the maximum size of an item (pane) in pixels or as a percentage.

Type:

Number

|

String

| undefined
Default Value: undefined

index.js
  • $(() => {
  • $("#splitter").dxSplitter({
  • items: [
  • {
  • // ...
  • maxSize: "500px",
  • }
  • ],
  • });
  • });

View Demo

minSize

Specifies the minimum size of an item (pane) in pixels or as a percentage.

Type:

Number

|

String

| undefined
Default Value: undefined

index.js
  • $(() => {
  • $("#splitter").dxSplitter({
  • items: [
  • {
  • // ...
  • minSize: "30%",
  • }
  • ],
  • });
  • });

View Demo

resizable

Specifies whether an item (pane) is resizable.

Type:

Boolean

Default Value: true

size

Specifies the initial size of an item (pane) in pixels or as a percentage. The size changes after any layout alteration.

Type:

Number

|

String

| undefined
Default Value: undefined

index.js
  • $(() => {
  • $("#splitter").dxSplitter({
  • items: [
  • {
  • // ...
  • size: "50%",
  • }
  • ],
  • });
  • });

If you do not specify pane sizes, the UI component splits up the panes automatically with even distribution.

NOTE
  • You can use minSize and maxSize properties to specify size constraints.

  • The total pane size should not exceed Splitter size.

View Demo

splitter

Specifies a splitter inside an item (pane).

Type: dxSplitter_Options | undefined
Default Value: undefined

Use this property to make the item a nested Splitter UI component.

Splitter with a nested splitter

index.js
  • $(() => {
  • $("#splitter").dxSplitter({
  • orientation: "vertical",
  • items: [{
  • text: "Top Panel"
  • },
  • {
  • splitter: {
  • items: [{
  • text: "Nested Left Panel"
  • },{
  • text: "Nested Central Panel"
  • },{
  • text: "Nested Right Panel"
  • }
  • ]
  • }
  • }
  • ]
  • });
  • });

View Demo

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component.

index.js
  • $(function() {
  • $("#splitterContainer").dxSplitter({
  • // ...
  • items: [
  • {
  • // ...
  • template: '<div>Custom Item</div>'
  • }
  • ]
  • });
  • });
See Also

text

Specifies text displayed for the UI component item.

Type:

String

If you use both this property and a template, the template overrides the text.

visible

Specifies whether or not a UI component item must be displayed.

Type:

Boolean

Default Value: true

When you set this property to true at runtime, displayed pane size becomes 0. Update other pane sizes to display the pane.