panes Array

An array of pane definitions.

panes.collapsed Boolean (default: false)

Specifies whether a pane is initially collapsed (true) or expanded (false).

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ {}, { collapsed: true } ]
});
</script>

panes.collapsedSize String

Specifies the size of a collapsible pane when collapsed, defined as pixels (i.e. "200px") or as a percentage (i.e. "50%"). When the pane is collapsed a .k-state-collapsed class is added to it to ease its styling. Note: This value must not exceed panes.max or be less then panes.min.

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ { collapsible: true, collapsedSize: "10%" }, {} ]
});
</script>

panes.collapsible Boolean (default: false)

Specifies whether a pane is collapsible (true) or not collapsible (false).

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ { collapsible: true }, {} ]
});
</script>

panes.contentUrl String

Specifies the URL from which to load the content of a pane.

Example

<div id="splitter">
  <div>Pane A</div>
  <div></div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ {}, { contentUrl: "https://www.telerik.com/" } ]
});
</script>

panes.label String

The label of the current pane. Will be used as a aria-label for the Splitter separator that has the pane as its primary one (the separator that is immediately after the pane).

Example

<div id="splitter">
  <div>Pane A</div>
  <div></div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ {
    label: "Label A"
  }, {
    contentUrl: "https://www.telerik.com/",
    label: "Label from URL"
  } ]
});
</script>

panes.labelId String

The ID of the element that should be used as a label of the current pane. Will be used as a value of the aria-labelledby attribute for the Splitter separator that has the pane as its primary one (the separator that is immediately after the pane).

Example

<div id="splitter">
  <div>
    <h5 id="ha">Title A</h5>
    Pane A
  </div>
  <div>
    <h5 id="hb">Title B</h5>
    Pane B
  </div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ {
    labelId: "ha"
  }, {
    labelId: "hb"
  } ]
});
</script>

panes.max String

Specifies the maximum size of a pane defined as pixels (i.e. "200px") or as a percentage (i.e. "50%"). The size of a resized pane cannot exceed the defined maximum size.

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ { max: "200px" }, {} ]
});
</script>

panes.min String

Specifies the minimum size of a pane defined as pixels (i.e. "200px") or as a percentage (i.e. "50%"). The size of a resized pane cannot be less than the defined minimum size.

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ { min: "100px" }, {} ]
});
</script>

panes.resizable Boolean (default: true)

Specifies whether a pane is resizable (true) or not resizable (false).

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ { resizable: false }, { resizable: false } ]
});
</script>

panes.scrollable Boolean (default: true)

Specifies whether a pane is scrollable (true) or not scrollable (false).

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ { scrollable: false }, {} ]
});
</script>

panes.size String

Specifies the size of a pane defined as pixels (i.e. "200px") or as a percentage (i.e. "50%"). It is recommended that one pane is left without size in order to compensate for changes in the viewport size. Note: This value must not exceed panes.max or be less then panes.min.

Example

<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ { size: "10%" }, {} ]
});
</script>