New to Kendo UI for jQuery? Start a free 30-day trial

Panes

configuration

An array of pane definitions.

panes

Array

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

panes.collapsed

Boolean

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

Default: false

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

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.

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

panes.collapsible

Boolean

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

Default: false

<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.

<base href="https://demos.telerik.com/kendo-ui/panelbar/ajax" />
<div id="splitter">
  <div>Pane A</div>
  <div></div>
</div>
<script>
  $("#splitter").kendoSplitter({
    panes: [
      {},
      { contentUrl: "../content/web/panelbar/ajax/ajaxContent1.html" },
    ],
  });
</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).

<base href="https://demos.telerik.com/kendo-ui/panelbar/ajax" />
<div id="splitter">
  <div>Pane A</div>
  <div></div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [ {
    label: "Label A"
  }, {
    contentUrl: "../content/web/panelbar/ajax/ajaxContent1.html",
    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).

<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.

<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.

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

panes.resizable

Boolean

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

Default: true

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

panes.scrollable

Boolean

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

Default: true

<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.

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