Drawer TagHelper Overview

The Telerik UI Drawer TagHelper for ASP.NET Core 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 by using the Drawer TagHelper.

     <kendo-drawer name="drawer" template-id="template" mode="overlay" position="left">
     </kendo-drawer>
    <script id="template" type="text/x-kendo-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-state-selected'>Third Item</li>
        </ul>

Basic Configuration

The Drawer TagHelper configuration options are passed as strongly-typed attributes of the tag that come with IntelliSense.

    <kendo-drawer name="drawer" template-id="template" mode="push" position="left" min-height="330" swipe-to-open="true" on-item-click="onItemClick">
        <mini enabled="true"/>
        <content>
            <h1 class="my-content">Swipe or drag me to the right <span class="k-icon k-i-arrow-chevron-right"></span></h1>
        </content>
    </kendo-drawer>
    <script>
        function onItemClick(e) {
            // Logs the selected drawer item text.
            console.log(e.item.text());
        }
    </script>
     <script id="template" type="text/x-kendo-template">
        <ul>
            <li data-role='drawer-item' class='k-state-selected'><span class='k-icon k-i-inbox'></span><span class='k-item-text'>Inbox</span></li>
            <li data-role='drawer-separator'></li>
            <li data-role='drawer-item'><span class='k-icon k-i-eye'></span><span class='k-item-text'>See more</span></li>
        </ul>
    </script>

Functionality and Features

Referencing Existing Instances

The following example demonstrates the basic configuration of the Drawer TagHelper and how to get the Drawer instance.

    <kendo-drawer name="drawer" template-id="template" mode="push" position="left" min-height="330" swipe-to-open="true" on-item-click="onItemClick">
        <mini enabled="true"/>
        <content>
            <h1 class="my-content">Swipe or drag me to the right <span class="k-icon k-i-arrow-chevron-right"></span></h1>
        </content>
    </kendo-drawer>

    <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>

See Also

In this article
Not finding the help you need? Improve this article