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