This is a migrated thread and some comments may be shown as answers.

Nested drawer for menu on left and right

5 Answers 1168 Views
Drawer
This is a migrated thread and some comments may be shown as answers.
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
Claudio asked on 04 Sep 2020, 12:46 PM

Hi, my goal is obtain a layout with a left menu (Push) and a right menu (Overlay) and in the middle the page content.

 

I tried nesting 2 TelerikDrawer objects without success:

<TelerikDrawer Data="LeftItems" Mode="DrawerMode.Push" MiniMode="true">
   <Content>

      <TelerikDrawer Data="RightItems" Mode="DrawerMode.Overlay" Position="DrawerPosition.Right">

         <Content>

...

         </Content>

      </TelerikDrawer>

   </Content>
</TelerikDrawer>

 

The right drawer is not visualized..

 

How to obtain the desired layout?

 

Thanks

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 04 Sep 2020, 05:10 PM

Hello Claudio,

I am attaching below a small sample that shows how this can be done - comments in the code (~/Shared/MainLayout.razor) explain the situation in more details.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
answered on 07 Sep 2020, 10:51 AM

Thanks Marin, the sample code you attached work well!

Only one question related to overlay mode: if the drawer is configured with Push the height of the panel is contained inside parent element, but with Overlay mode the panel fit the full browser height. There is a way to fit the height of the parent element as done with Push mode?

Thanks

0
Marin Bratanov
Telerik team
answered on 07 Sep 2020, 11:02 AM

Hello Claudio,

The 100% height is by design (documented here). Nevertheless, you can review the component rendering and CSS rules in the browser devtools (this blog post can help you do that) and add rules to get the desired changes. For examle, like this:

 

    <style>
        .limited-height .k-drawer {
            height: 50%;
        }
    </style>
    <TelerikDrawer Data="RightItems" Mode="DrawerMode.Overlay" Position="DrawerPosition.Right" @ref="@RightDrawerRef"
Class="limited-height">

 

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Accepted
Marin Bratanov
Telerik team
answered on 09 Sep 2020, 02:32 PM

I've also added a sample project and explanations in our samples repo: https://github.com/telerik/blazor-ui/tree/master/drawer/two-drawers

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
answered on 09 Sep 2020, 02:34 PM
Thanks Marin
Tags
Drawer
Asked by
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
Answers by
Marin Bratanov
Telerik team
Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
Share this question
or