Keep the Pane Size of the Splitter in Percentage Points
Environment
Product | Progress® Kendo UI® Splitter for jQuery |
Operating System | Windows 10 64bit |
Visual Studio Version | Visual Studio 2017 |
Preferred Language | JavaScript |
Description
How can I keep the Kendo UI Splitter pane sizes in percentages upon user resize?
Solution
The following example demonstrates how to achieve the desired scenario.
<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>