Keep Pane Size in Percentage Points
The following example demonstrates how to keep the Kendo UI Splitter pane sizes in percentages upon user resizes.
<div id="splitter" style="height: 400px">
<div>
Left pane
</div>
<div>
Content
</div>
</div>
<script>
$(document).ready(function() {
function onResize(e) {
// Prevent the endless recursion from resizes.
if (!this.appliesSizes) {
this.appliesSizes = true;
// Calculate the pane width.
var element = this.element;
var pane = element.find(".k-pane:first");
var ratio = Math.ceil(pane.width() * 100 / element.width());
// Set the pane width in percentage points.
this.size(pane, ratio + "%");
this.appliesSizes = false;
}
}
$("#splitter").kendoSplitter({
panes: [
{ collapsible: true, size: "20%" },
{ collapsible: false }
],
resize: onResize
});
});
</script>