Drawer overlay mode with content

[Vedad]

Hi,

Drawer widget with overlay mode suits my needs for left positioned menu. However, I would like to be able to display something on overlay when option on drawer is selected.

For example, if i open menu and click first item on the list, I get small form open in overlay.

Is it possible to achieve this? (I don't want to use push mode of the drawer and then create overlay completely manually - moving main view is not an option at the moment).

Thank you very much.

All the best

Vedad

[Nikolay]

Hi Vedad,

I need some more clarification on the case so I fully understand it and be able to advise further.

Do you need to show a form in the overlay?

Or when an item is selected and the Drawer is hidden?

Looking forward to your reply.

Regards,

Nikolay

 

 

[Vedad]

Hi Nikolay,

thank you for your reply. 

That is exactly what I want, I want to display different forms or other contents as a part of overlay when menu is open. For example, I select something in a main page, and then want to have additional actions for that on menu with overlay - eg. editing data in form, showing more details etc.  So when I select option (or sub-option in hierarchy) different elements show in overlay.

Also is it possible to position overlay drawer little lower (so it doesn't overlay header bar?)

Thanks a lot,

Vedad

[Georgi Denchev]

Hello, Vedad,

Thank you for the additional details.

Overlay content

You can utilize the itemClick event of the drawer and initialize a Kendo Window whenever you click on an option in the drawer. Then you can append the window to the drawer overlay element.

 itemClick: function() {
            let overlay = this.overlayContainer;

            let window = $("#window").data("kendoWindow");

            // Destroy the window if it exists.
            if(window) {
              window.destroy();
              $("#window").empty();
            }

            $("<div id='window'></div>")
              .appendTo(overlay)
              .kendoWindow({
              width: 300,
              height: 500,
              position: {
                top: "30%",
                left: "50%"
              }
            });

The content of the window can be anything you want, you can check the online demos for additional information and examples.

Drawer position

You can use CSS to move the drawer downwards a bit:

    #drawer {
      top: 50px;
    }

Dojo

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

Best Regards,
Georgi Denchev
Progress Telerik