Rank 1
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.
1 Answer, 1 is accepted
Hello Godie,
We do not have such an example using the Menu component, but have one with the Drawer. The Drawer is indeed a component we have that can be used for the desired functionality as the Drawer represents a dismissible panel used for navigation in responsive web applications or for changing a content of a section in the page. The Admin Dashboard sample application we have uses a Drawer positioned on the left hand side that is used to navigate between pages. The application uses RazorPages and TagHelpers to demonstrate the use of the Telerik UI components in that scenario, and the complete source code is available in this repository.
If you are using the Telerik Visual Studio extension you can also create a template project, based on the Admin Dashboard sample application that has the Drawer as a navigation component.
If not, I have attached a sample generated as a template where you can review the implementation of the Drawer on the _Layout.cshtml page.
UPDATE:
The above example demonstrates the use of the Drawer with TagHelpers. When using Html Helpers is desired you could add the Drawer to the _Layout page the following way:
<body class="k-content">
@{Html.Kendo().Drawer().Name("drawer")
.Mini(true)
.Position("left")
.SwipeToOpen(true)
.Template(@"
<ul>
<li><a class='k-link' href='/' data-role='drawer-item'><span class='k-icon k-i-grid '></span>Index</a></li>
<li><a class='k-link' href='/Home/Contact' data-role='drawer-item'><span class='k-icon k-i-globe '></span>Contact</a></li>
<li data-role='drawer-separator'></li>
<li><a class='k-link' href='/Home/About' data-role='drawer-item'><span class='k-icon k-i-user '></span>About</a></li>
</ul>
")
.Content(@<text>@RenderBody()</text>)
.Render();
}
<script>
$(document).ready(function () {
//highlight selected Drawer item on page load
$('a[href="@routeUrl"]').addClass('k-selected');
})
</script>I hope this helps.
Regards,
Aleksandar
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/.
Rank 1
Hello Aleksandar,
Thank you for your response. I have already explored this option of using TagHelper.
But my project demands me to build the application using HTML helpers.
I find trouble locating the same example using HTML helpers.
It would be great if you can share me the same using HTML helpers.
Thanks
Godie.
Hello Godie,
We do not have this example for ASP.NET Core using Telerik UI for ASP.NET Core HtmlHelpers. Generally speaking, you should be able to convert the example without any issues, as both flavors support the same functionality. If reviewing a HTML Helper implementation is mandatory, than you can check the Telerik UI for ASP.NET MVC example for the same app. It's source code is located in this public repository.
Rank 1
Hello Aleksandar,
I did give a try to achieve the drawer functionality using the HTMLhelpers. But I get an issue when calling the @RenderBody() inside the drawer content. Then RenderBody() was not recognized and threw an error stating that I should be calling the RenderBody() method.
@(Html.Kendo().Drawer()
.Name("drawer")
.TemplateId("drawerTemplate")
.Mode("push")
.Mini(false)
.Position("left")
.Width(240)
.Navigatable(true)
.Events(ev => ev.ItemClick("onItemClick"))
.Content(@"
<div>
<main role='main' class='k-content'>
@RenderBody()
</main>
</div>
")
)
<script id="drawerTemplate" type="text/html">
//some content here
</script>
<body class="k-content">
@{Html.Kendo().Drawer().Name("drawer")
.Mini(true)
.Position("left")
.SwipeToOpen(true)
.Template(@"
<ul>
<li><a class='k-link' href='/' data-role='drawer-item'><span class='k-icon k-i-grid '></span>Index</a></li>
<li><a class='k-link' href='/Home/Contact' data-role='drawer-item'><span class='k-icon k-i-globe '></span>Contact</a></li>
<li data-role='drawer-separator'></li>
<li><a class='k-link' href='/Home/About' data-role='drawer-item'><span class='k-icon k-i-user '></span>About</a></li>
</ul>
")
.Content(@<text>@RenderBody()</text>)
.Render();
}
<script>
$(document).ready(function () {
//highlight selected Drawer item on page load
$('a[href="@routeUrl"]').addClass('k-selected');
})
</script>
Rank 1
Hello Aleksander,
I tried to run your attached project. I guess the drawer is not rendered properly in the project. Did this happen in your case too ?
.Template(@"
<ul>
<li data-role='drawer-item'><span class='k-icon k-i-grid '></span><a class='k-link k-item-text href='/'>Index</a></li>
<li data-role='drawer-item'><span class='k-icon k-i-globe '></span><a class='k-link k-item-text' href='/Home/Contact' >Contact</a></li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'><span class='k-icon k-i-user '></span><a class='k-link k-item-text' href='/Home/About'>About</a></li>
</ul>
")
Rank 1
Hi Aleksandar,
Thank you for the help. I can call the RenderBody() now and use the drawer as side menu for my application.