Create MDI Interface where windows are bounded within right column

[Gerry]

Hi,

I’m trying to create an MDI type interface with the following behavior.

1. Two column layout with Drawer widget on left.
2. Open window within visible portion of right column.
3. Window cannot move outside of the visible portion of right column.
4. Window maximizes only to fill the visible portion of the right column.

Are there some examples around that would help or could y’all give some advice on how to do this?

Thanks,

-G

[Georgi Denchev]

Hello, Gary,

I am not certain if I fully understand the requirement but you can use a Kendo Splitter with two sections. One for the drawer and one for the window. The window can be appended to a container that is located in the second(right) pane of the splitter. Additionally, you can prevent the window from being dragged outside of the container. This will also limit the full size to the container.

    <div id="splitter">
      <div id="drawer"><div>Content area content.</div></div>
      <div id="window-container">
        <div id="dialog"></div>
      </div>
    </div>

    <script>
      $("#splitter").kendoSplitter({
        panes: [{}, {}]
      });
      $("#dialog").kendoWindow({
        appendTo: "#window-container",
        draggable: {
          containment: "#window-container"
        }
      });
      $("#drawer").kendoDrawer({
        mode: "push",
        template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
        position: 'left'
      }).getKendoDrawer().show();

    </script>

Dojo

https://dojo.telerik.com/@gdenchev/ORoReGUD 

Best Regards,
Georgi Denchev
Progress Telerik