Drawer Overview
The Drawer is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Drawer HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Drawer widget.
The Drawer is a dismissible panel used for navigation in responsive web applications or for changing a content of a section in the page.
Initializing the Drawer
The following example demonstrates how to define the Drawer.
@(Html.Kendo().Drawer()
.Name("drawer")
.Template(@"<ul>
<li data-role='drawer-item'>First Item</li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'>Second Item</li>
<li data-role='drawer-item' class='k-selected'>Third Item</li>
</ul>")
.Mode("push")
.Position("left")
.SwipeToOpen(true)
.Content(@"<div style='height: 200px;'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime?</div>")
)
Functionality and Features
Referencing Existing Instances
The following example demonstrates how to get the Drawer instance.
@(Html.Kendo().Drawer()
.Name("drawer")
.Template(@"<ul>
<li data-role='drawer-item'>First Item</li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'>Second Item</li>
</ul>")
.Content(@"<div style='height: 200px;'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime?</div>")
)
<script type="text/javascript">
$(function () {
// The Name() of the Drawer is used to get its client-side instance.
var drawer = $("#drawer").data("kendoDrawer");
console.log(drawer);
});
</script>