Keep Pane Size in Percentages

The example below demonstrates how to keep the Kendo UI Splitter pane sizes in percentages upon user resizes.

    <div id="splitter" style="height: 400px">
        Left pane

      $(document).ready(function() {
        function onResize(e) {
          // prevent endless recursion from resizes
          if (!this.appliesSizes) {
            this.appliesSizes = true;

            // calculate pane width
            var element = this.element;
            var pane = element.find(".k-pane:first");
            var ratio = Math.ceil(pane.width() * 100 / element.width());

            // set pane width in percentages
            this.size(pane, ratio + "%");

            this.appliesSizes = false;

          panes: [
            { collapsible: true, size: "20%" },
            { collapsible: false }
          resize: onResize

See Also

For more runnable examples on the Kendo UI Splitter, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article