New to Kendo UI for jQuery? Download free 30-day trial

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

In this article