Kendo Splitter Orientation

Question

I am really struggling trying to get the layout I want created with the Kendo UI Splitter. All I am trying to do is have a right pane and a top and bottom pane with the right pane being from top to bottom and not cut off by the bottom pane. Below is a diagram of what I am trying to accomplish. If anyone could provide an example of how to do this with either using Razor or JQuery it would be greatly appreciated.

Thanks in advance.

Answer 1

Embed one splitter inside another:

<div id="leftRightSplitter">
    <div id="leftPane">
      <div id="topBottomSplitter">
        <div id="topPane">
          Left-Top
        </div>
        <div id="bottomPane">
          Left-Bottom
        </div>
      </div>
    </div>
    <div id="rightPane">
      Right
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#leftRightSplitter").kendoSplitter({
            orientation: "horizontal",
            panes: [
                { collapsible: false, size: "75%" },
                { collapsible: false }
            ]
        });

        $("#topBottomSplitter").kendoSplitter({
          orientation: "vertical"
        });
    });
</script>

Example: https://dojo.telerik.com/@Stephen/umEhOMId

Or: https://demos.telerik.com/kendo-ui/splitter/index

Or: https://demos.telerik.com/aspnet-mvc/splitter