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>

See Also

• Basic Usage of the Splitter (Demo)
• Using the API of the Splitter (Demo)
• JavaScript API Reference of the Splitter