If I click on the Top button, then the vertical splitter bar goes to the top, when I click on the Middle button then the top and bottom pane get 50% values and the bar goes to the center, however, once I click on the Bottom button, my expectation would be for the splitterbar to move to the bottom but it doesn't and I am not seeing what the issue could be.
(() => {
RunUpdatedSplitters();
ButtonEvents();
})();
function RunUpdatedSplitters() {
$('#splitter2').kendoSplitter({
panes: [{
size: '8%',
collapsible: false
}, {
size: '100%',
collapsible: false
}]
});
$('#right-pane2').kendoSplitter({
orientation: 'vertical',
panes: [{
size: '50%',
collapsible: true
}, {
size: '50%',
collapsible: true
}],
resize: (e) => {
console.log(e);
const topPane = $("#top-pane2");
const bottomPane = $("#bottom-pane2");
console.log("Top Pane", topPane.height());
console.log("Bottom Pane", bottomPane.height());
}
});
}
function ButtonEvents() {
$("#btnTop").off("click");
$("#btnTop").on("click", (e) => {
console.log("Top");
const splitter = $("#right-pane2").getKendoSplitter();
//splitter.collapse("#bottom-pane2");
//splitter.expand("#top-pane2");
splitter.expand("#bottom-pane2");
splitter.collapse("#top-pane2");
splitter.size("#top-pane2", "0%");
});
$("#btnMiddle").off("click");
$("#btnMiddle").on("click", (e) => {
const splitter = $("#right-pane2").getKendoSplitter();
splitter.expand("#bottom-pane2");
splitter.expand("#top-pane2");
splitter.size("#bottom-pane2", "50%");
splitter.size("#top-pane2", "48.25%");
$('#right-pane').css('top', '0px');
});
$("#btnBottom").off("click");
$("#btnBottom").on("click", (e) => {
const splitter = $("#right-pane2").getKendoSplitter();
//splitter.collapse("#top-pane2");
//splitter.expand("#bottom-pane2");
splitter.expand("#top-pane2");
splitter.collapse("#bottom-pane2");
splitter.size("#bottom-pane2", "100%");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.all.min.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-main.css" rel="stylesheet" />
<div id="Container2" style="height: calc(100vh - 102px);margin-top: 58px;" class="peek-a-boo-1">
<div id="plitterContainer" style="height:100%">
<div id="splitter2" style="height: 100%;">
<div id="left-pane2">
<div id="btns">
<button id="btnTop">Top</button>
<button id="btnMiddle">Middle</button>
<button id="btnBottom">Bottom</button>
</div>
</div>
<div id="right-pane2" style="overflow:hidden !important;">
<div id="top-pane2" style="height: 45%; margin-top:30px; background-color:green;">
<div id="bottom-pane2" style="background-color:darkcyan;height:45%;">
</div>
</div>
</div>
</div>
</div>
It sounds like you want the following behavior:
If that's the case, then this is the logic you'll need to apply:
Here is the relevant API documentation for every method you'll need to leverage:
Demo: https://dojo.telerik.com/sJeoSduV
<div id="splitter-horizontal">
<div>
<button id="button-top">Top</button>
<button id="button-middle">Middle</button>
<button id="button-bottom">Bottom</button>
</div>
<div>
<div id="splitter-vertical">
<div></div>
<div></div>
</div>
</div>
</div>
$(() => {
const splitterVertical = $('#splitter-horizontal').kendoSplitter({
panes: [
{ collapsible: false },
{ collapsible: false }
]
}).data('kendoSplitter');
const splitterHorizontal = $('#splitter-vertical').kendoSplitter({
panes: [
{ collapsible: true },
{ collapsible: true }
],
orientation: 'vertical'
}).data('kendoSplitter');
$('#button-top').kendoButton({
click: () => {
// collapse bottom and expand top
const bottomPane = splitterHorizontal.element.find('.k-pane:last');
splitterHorizontal.collapse(bottomPane);
const topPane = splitterHorizontal.element.find('.k-pane:first');
splitterHorizontal.expand(topPane);
}
});
$('#button-middle').kendoButton({
click: () => {
// expand both and resize to 50%
splitterHorizontal.expand('.k-pane');
const topPane = splitterHorizontal.element.find('.k-pane:first');
splitterHorizontal.size(topPane, '50%');
const bottomPane = splitterHorizontal.element.find('.k-pane:last');
splitterHorizontal.size(bottomPane, '50%');
}
});
$('#button-bottom').kendoButton({
click: () => {
// collapse top and expand bottom
const topPane = splitterHorizontal.element.find('.k-pane:first');
splitterHorizontal.collapse(topPane);
const bottomPane = splitterHorizontal.element.find('.k-pane:last');
splitterHorizontal.expand(bottomPane);
}
});
});