Telerik Forums
UI for ASP.NET Core Forum
1 answer
1.2K+ views

I have searched for this everywhere and its not easy to get the right help here .

For most controls we have a demo/example. But there is not proper example for this.

Say I am developing a web app and I want a Layout page that can be used across all pages.

Telerik Drawer => I tried to used this. But I believe drawer is not intended for this purpose. 

Telerik Menu => no proper example where it can be used as a side bar. I can see one under the kendo ui javascript menu, but not one with asp doe net core.

A working example of a side menu containing a list of items would be really helpful.

Aleksandar
Telerik team
 updated answer on 07 Dec 2022
3 answers
188 views

I'm using the Drawer TagHelper and when the page opens, I'd like the Drawer to start open if the user cookie is set to open and closed if the cookie is set to closed. I am doing this currently using javascript but it causes it to open every time you go to a new page. Is there a setting on the taghelper that will cause it to start out open or closed rather than having to set it using javascript?

Thanks!

Laurie

Here's my code:

                <kendo-drawer name="drawer" mode="push" on-hide="onHide" min position="left" swipe-to-open="false" template-id="template" class="no-border">
                    <mini enabled="true" />
                </kendo-drawer>
<script>
            $(document).ready(function () {
               var drawerInstance = $("#drawer").data().kendoDrawer;
                var hideMenu = getCookie("HideCustomerMenu");                  
                if (hideMenu == 'true') {
                    var arrowButton = $("#expand");
                    arrowButton.toggleClass('flip');
                    drawerInstance.hide();
                }
                else {                  
                    drawerInstance.show();
                }
 
            });
</script
        <script id="template" type="text/x-kendo-template">
            <ul class="menuBar list-unstyled">
                       <li id="customerinfo"><a href="/customer" ><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Customer Information"></i>Customer Info</a></li>
                       <li id="test"><a href="/test" ><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Test"></i>Test</a></li>
            </ul>
        </script>
Stoyan
Telerik team
 updated answer on 08 Sep 2022
1 answer
581 views

I love using all the kendo widgets you offer. But why is the drawer component so hard to use?

My approach is to use a global navigation sidebar. Currently I'm using the panelbar as navigation but somehow I have the feeling that the kendo panelbar was never intended to be a navbar.

So I looked again in the demos and saw the drawer. As described in the introduction it is intended to be used as a side navigation. Also I figured out that the left sidebar on the demo pages (where you can navigate through the available widgets kendo offer) is a drawer too. So I thought hey, maybe it is just the thing you need right now!

But then I tried to implement it in my app and it is a mess compared to all the other available kendo components. Just a few things I noticed, maybe somebody can answer me the points:

  1. Why is the widget automatically configured to use a "content"? When not defining a content (because I want the widget just for navigation, not for showing any content by clicking on a item because the widget should only navigate me to other pages), I have to mess with the css that the space for the content is disapearing (see in the picture).
  2. Why this widget doesn't support to create the items via razor syntax? A lot of other components support to add its items through razor via ".Items(x => x.Add().Text("Home"))". Here I have to configure so much html to create a simple, small and lightweight menu via ".Template(@"[..]")".
    In addition, the kendo panelbar supports even to add an action behind every item through ".Action("Index", "Home")" (exactely what I need and what I'm using right now).
  3. Why is the collapsing of a submenu not integrated in the component? In the demo under "Hierarchy" I have to register the "ItemClick"-event and have to insert the whole logic for collapsing in javascript. Yes, you provided a working script but why it isn't a built-in feature of the component?
  4. Or maybe I'm wrong and the drawer is not the component I'm searching for? In my opinion the drawer is comparable to a vertical tabstrip where all the content is already existing in background and after clicking on an item the content will be shown. It's not really working like a navigation bar which will provide you to the set url. Somehow I wonder why I am the only one who wants a simple sidebar navigation with hierarchy, where it will redirect me to the page by clicking on its item.

In the second picture you see the super easy to use panelbar as my current navigation bar in my application compared to the drawer I tried to integrate. Like I said I have the feeling the panelbar component is not intended to be a navbar. Also it has a bug which I already reported to you and which is pretty annoying (https://github.com/telerik/kendo-ui-core/issues/6528).

Mihaela
Telerik team
 answered on 01 Nov 2021
1 answer
314 views

I've searched in the documentation but haven't been able to solve this problem so far:

I want to use the drawer component as a global navigation menu. This means that the drawer items should be clickable and redirect to different views within the solution and the view should be rendered inside the content section. 

in regards to the first problem, which is that the items should be clickable i have my template setup like this:

    @(Html.Kendo().Drawer()
    .Name("drawer")
    .Template(@"
    <ul>
        <li data-role='drawer-item'><a asp-controller='Home' asp-action='Index'>First Item</a></li>
        <li data-role='drawer-separator'></li>
        <li data-role='drawer-item'>Second Item</li>
    </ul>")
    .Mode("push")    
    )

but using the asp helpers is not working. 

and regarding showing the view inside the .content, i don't know how to make that work.

Any help will be appreciated.

 

 

Anton Mironov
Telerik team
 answered on 10 Nov 2020
2 answers
68 views

Not sure if the drawer is really meant for this, as it seems a bit more like a highly interactive tab control than just being a fly-out. But is there a way to have 2 drawers, one on the left and another on the right?

I'd like to have the left handle navigation, and the right be a fly-out for other various things.

Thanks

Richard
Top achievements
Rank 1
 answered on 25 Sep 2019
1 answer
340 views
If you look at the demo https://demos.telerik.com/aspnet-core/drawer/tag-helper, you can expand the drawer but as soon as you click one of the drawer items it auto-collapses. How can we avoid this behavior and keep the drawer expanded?
Tsvetomir
Telerik team
 answered on 18 Sep 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?