Create MDI Interface where windows are bounded within right column

1 Answer 76 Views
Drawer Window
Gerry
Top achievements
Rank 1
Gerry asked on 27 Jul 2023, 10:01 PM

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

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 01 Aug 2023, 01:19 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Drawer Window
Asked by
Gerry
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or