-1

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.

Layout Description.

Thanks in advance.

deved out
  • 31
  • 1
  • 6

1 Answers1

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

The Dread Pirate Stephen
  • 3,089
  • 1
  • 12
  • 14
  • Thank you very much, this is exactly what I was trying to do but I was using Razor syntax. I wasn't able to get the panels to be horizontal when I nested them. There is no "orientation" option w/ Razor. Thanks again! – deved out Aug 14 '18 at 19:24
  • Yes, there is an orientation option with Razor: .Orientation(SplitterOrientation.Vertical). You can see it used in the https://demos.telerik.com/aspnet-mvc/splitter link. – The Dread Pirate Stephen Aug 15 '18 at 13:24
  • @devedout If this solution worked for you, please select it as the answer – Shai Aug 16 '18 at 12:40