Getting Started with the Splitter
This guide demonstrates how to get up and running with the Kendo UI for jQuery Splitter.
After the completion of this guide, you will achieve the following end result:
<div id="splitter">
<div>Pane A</div>
<div>Pane B</div>
<div>Pane C</div>
</div>
<script>
$("#splitter").kendoSplitter({
panes: [ { size: "30%" }, { size: "40%", min: "50px" }, { size: "30%" } ],
orientation: "vertical"
});
</script>
1. Create a div Element
First, create a <div> element with two or more <div> children.
<div id="splitter">
<div>Pane A</div>
<div>Pane B</div>
<div>Pane C</div>
</div>
2. Initialize the Splitter
In this step, you'll initialize the Splitter component from the parent <div> element.
- Initialize the Splitter within a
$(document).ready()statement.- The Splitter must be visible at the time of initialization. If the component nested in a hidden container, execute the
resizemethod of the Splitter as soon as it becomes visible.
$("#splitter").kendoSplitter({
});
3. Set the Orientation of the Splitter
Now, you can set the orientation of the Splitter.
$("#splitter").kendoSplitter({
orientation: "vertical"
});
4. Configure the Panes
In this step, you'll configure the panes of the Splitter.
$("#splitter").kendoSplitter({
panes: [ { size: "30%" }, { size: "40%", min: "50px" }, { size: "30%" } ],
orientation: "vertical"
});