Two drawers in one drawer-container

[Xuesong]

Hi

In my use case, I'd like to have two drawers in one drawer-container, one left, one right, with different "mode". If the left one has push mode, and the right has overlay, then the right drawer doesn't work well.

 

This may be a feature request more than a bug report. Is there currently any solution for this use case? Has this kind of feature been considered for the roadmap?

 

Thanks

Xuesong

[Svet]

Hi Xuesong,

Indeed the reported use-case scenario of having two drawers in one drawer-container where one is on the left and the other is on the right hasn't been considered so far. But could we ask you for a bit more details in order to demonstrate the implemented approach on your side. If possible could you provide a StackBlitz example demonstrating the implementation. Thank you in advance. That will help us to inspect the used code and we will be able to try and suggest some workaround or log a new feature request. We are looking forward to your reply.

Regards,
Svetlin
Progress Telerik

[Noah]

I know this is old, but we have encountered this exact use case and the same issues.  We use a drawer on the left that is used for navigation and has a "push" display  mode.  We have a drawer on the right that slides out when the user needs help and inside there is a form for submitting a help ticket.  that drawer uses overlay mode.

we are migrating as much use of the angular material components to use kendo components as possible. the angular material navigation container handles having two drawers with different modes in the same container.  in kendo however, the first drawer mode gets applied to both drawers and it doesn't work.  We were able to get it to work with a nested drawer container. It was important to have the drawer meant to be an overlay be the outer container and have the push drawer be in the nested container otherwise it didn't work when both drawers were open.

    <kendo-drawer-container>
        <kendo-drawer #rightOverlay
            [items]="helpstuff"
            mode="overlay"
            position="end"
            [expanded]="showHelp"></kendo-drawer>
        <kendo-drawer-content>
            <kendo-drawer-container>
                <kendo-drawer #leftPush
                    [items]="navstuff"
                    mode="push"
                    position="start"
                    [expanded]="showLeft">
                </kendo-drawer>
                <kendo-drawer-content>
                    <div class="k-form">
                        <div class="k-form-field">
                            <button class="k-button" (click)="rightOverlay.toggle()">Toggle the right Drawer</button>
                        </div>
                        <div class="k-form-field">
                            <button class="k-button" (click)="leftPush.toggle()">Toggle the left Drawer</button>
                        </div>
                    </div>
                </kendo-drawer-content>
            </kendo-drawer-container>
        </kendo-drawer-content>
    </kendo-drawer-container>

[Xuesong]

Hello Noah,

thank you very much for your clever idea about a nested drawer container. Technically it does work. But in our case, we really need two drawers (left and right) both in "push" mode. 

The solution was to combinate Kendo Drawer (for the left sidebar) and Material Overlay (for the right). Maybe it is't perfect but It works fine for us.

Thanks again for your answer. And I'm looking forward to some KendoUI release, which will fix it.

[Svet]

Hi Xuesong,

Thank you for the provided additional details. I have logged a new feature request asking for a built-in feature that allows using a left and a right Drawer at the same time. Please see it at the following link:

https://feedback.telerik.com/kendo-angular-ui/1547451-left-and-right-drawer

We will track the demand for the feature request and eventually add it to our future development plans.