Drawer overlay mode with content

1 Answer 10 Views
Drawer
Vedad
Top achievements
Rank 2
Iron
Iron
Veteran
Vedad asked on 13 Jun 2022, 04:05 PM

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
Telerik team
commented on 16 Jun 2022, 01:16 PM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 16 Jun 2022, 01:21 PM

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

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 21 Jun 2022, 09:35 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Drawer
Asked by
Vedad
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Georgi Denchev
Telerik team
Share this question
or